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

这篇具有很好参考价值的文章主要介绍了【element-UI】el-upload本地上传图片，点击表单提交和一起上传，使用formdata对象上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

需求效果如下图：
el-upload和表单一起使用,Element-UI,前端,vue.js,elementui

解决代码

因为后端要求图片需要和其他参数一起提交，使用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文章来源地址https://www.toymoban.com/news/detail-519218.html

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