【element-UI】el-upload本地上传图片，点击提交，表单和图片文件一起上传，使用formdata对象上传

原创已于 2024-11-29 15:46:33 修改 · 1.1w 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Element-UI

代码可运行

于 2022-11-01 10:52:16 首次发布

本文介绍如何使用El-upload组件实现图片的本地预览，并在表单提交时将图片与其他参数一同发送到服务器的方法。通过设置特定属性，如action值为'#'及auto-upload为false等，确保图片仅在最终提交时上传。

el-upload本地上传图片，点击提交表单和图片文件一起上传

项目需求：表单中有一项上传照片，上传时先存在本地（即先不提交）

需求效果如下图：
在这里插入图片描述

解决代码

因为后端要求图片需要和其他参数一起提交，使用formdata对象携带参数，通过设置el-upload中action参数值为#，以及auto-upload（是否在选取文件后立即进行上传）为false

<el-upload
	action="#"
	:show-file-list="false"
   	:auto-upload="false"
    :multiple="false"
    :on-change="uploadFile"
    drag
    accept="image/jpg,image/jpeg,image/png">
    <i v-if="imageUrl" class="el-icon-circle-close deleteImg" @click.stop="handleRemove"></i>
    <img v-if="imageUrl" :src="imageUrl" class="el-upload--picture-car" />
    <div v-else>
    	<i class="el-icon-picture" style="margin-top: 40px; font-size: 40px; color: #999a9c"></i>
      	<div>上传图片</div>
       	<div>格式为png、jpeg或jpg</div>
   	</div>
</el-upload>
<el-button type="primary" @click="submitOrder">确 定</el-button>
<script>
  import { setOrderStatus } from '接口路径'
  export default {
    data() {
      return {
        formData： "",
        imageUrl: ""
        orderId: "",
        userId: "",
        userName: ""
      }
    },
    methods: {
      // 上传图片
      uploadFile(item) {
	    this.formData = item.raw; // 图片文件
	    this.imageUrl = URL.createObjectURL(item.raw); // 图片上传浏览器回显地址
	    console.log(this.imageUrl, "imageUrl")
	    console.log(this.formData, "formData")
      },
      handleRemove() {
	    this.imageUrl = ""
	  },
	  submitOrder() {
        var formData = new FormData();
        formData.append("photoFile", this.formData);  // 照片文件
        formData.append("orderId", this.orderId); // 其他参数
        formData.append("userId", this.user.id); // 其他参数
        formData.append("userName", this.user.username); // 其他参数
        setOrderStatus(formData).then(res => {
          console.log(res)
        }, err => {
          console.log(err)
        })
	  }
    }
  }
</script>
<style scoped>
.deleteImg {
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}
img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}
</style>

接口api

export function setOrderStatus(data) {
  return request({
    url: `api/order/status`,
    method: 'post',
    data,
    headers: {
      'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq'
    }
  })
}