vue-update-表单形式复写方法上传图片

Posted 2020-09-27 郑福坤

 handleSave() {
        const formData = new FormData();
        /* eslint-disable */
        for (let key in this.dataInfo) {
          if (Object.prototype.hasOwnProperty.call(this.dataInfo, key)) {
            formData.append(key, this.dataInfo[key]);
          }
        }
        let para = {
        			headers: {‘content-type‘: ‘multipart/form-data‘},
					style: "styleType",
				    path : "paths",
				    city : 1
					};	
        this.$http.post(‘http://img.zeju.cn/zejuimg/img/upload‘, formData, para)
          .then((res) => {
            console.log(res);
          });
      },

　　

<el-upload
	class="avatar-uploader"
　　     action=""						 										  
	:show-file-list="false"
	:on-success="handleAvatarSuccessLogoPc"	
	:on-error="handleAvatarErrorLogoPc"								  	  
	:on-progress="handleProgressLogoPc"
	:before-upload="beforeUploadLogoPc"
	:http-request="handleSave">
	<img v-if="imageUrlLogoPc" :src="imageUrlLogoPc" class="avatar">
	<i v-else class="el-icon-plus avatar-uploader-icon" ref="plusIcon"></i>
	<p id="bottomPc" style="position: absolute;bottom: 0;background: rgba(0,0,0,.3);color:#fff;width: 100%;margin: 0;padding: 5px;">点击上传图片</p>
	<el-progress v-show="showFlagLogoPc" type="circle" :percentage="progressingLogoPc" :status="statusLogoPc" style="position: absolute;top:10%;left:15%;" ></el-progress>
</el-upload>