el-upload圖片上傳

<template>
 <el-card style="width: 15rem">
	<el-upload :multiple="multiple" action="${pageContext.request.contextPath}/lookup/editEvidence/123"
	:limit='1'  drag list-type="picture" :auto-upload="false" :http-request="uploadFile" ref="upload">
	<i class="el-icon-upload"></i>
	<div class="el-upload__tip" slot="tip">只能上傳一個jpg/png文件</div>
	</el-upload>
     <el-button @click="subPicForm" type="primary" style="width: 13rem;margin-top: 1rem">提交圖片</el-button>
	 </el-card>
</template>

其中:limit='1’爲限制上傳個數，本文限制上傳1個
在data中定義

data(){
return{
        multiple: true,
        formDate: "",
}
}

methods:{
      uploadFile(file) {
        this.formDate.append('file', file.file);
      },
      subPicForm() {
        this.formDate = new FormData()
        this.$refs.upload.submit();
        //向formDate追加我所需參數
        this.formDate.append('uuid', this.userInformation.id);
        //設置請求頭
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        console.log(this.formDate,this.$refs.upload,config)
        this.axios.post("/api/profile/edit_head_image", this.formDate, config).then(res => {
          //上傳成功回傳輸出---因個人定義自行作出調整
          if (res.data.errno === "6") {
            this.$notify({
              title: res.data.errmsg,
              type: 'success'
            })
          }
          //上傳失敗輸出---因個人定義自行作出調整
          else {
            this.$notify({
              title: res.data.errmsg,
              type: 'error'
            })
          }
        }).catch(res => {
          console.log(res)
        })
      },
}

能力不足水平有限
有問題別講髒話罵人
來學習交流
有問必答
email:[email protected]