码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-07-12 23:30:53      阅读:953      评论:0      收藏:0      [点我收藏+]

标签:handle   loader   osi   update   cti   const   int   image   rgb   

 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>

  

  

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

标签:handle   loader   osi   update   cti   const   int   image   rgb   

原文地址:http://www.cnblogs.com/jessical626/p/7157778.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!