关于vue.js:vueelement上传图片

1. 开发环境 vue+element
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们会遇到上传文件的操作, 上面我来分享一下 vue+element 怎么实现, 心愿对你有所帮忙。
4. 废话不多说, 间接上代码:

<el-upload list-type="picture-card" :on-success="uploadsuccess" :action="uploadurl">
    <i slot="default" class="el-icon-plus">
    </i>
    <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in">
                </i>
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download">
                </i>
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                <i class="el-icon-delete">
                </i>
            </span>
        </span>
    </div>
</el-upload>

5. 在 return 中增加:

// 头像上传文件
      files: "",
      // 图片上传地址
      uploadurl: process.env.VUE_APP_BASE_URL + "/api/account/coconfig",
      
 dialogImageUrl: "",
 dialogVisible: false,
 disabled: false,

6. 在 methods 中增加如下代码:

handleRemove(file) {console.log(file);
},
handlePictureCardPreview(file) {
   this.dialogImageUrl = file.url;
   this.dialogVisible = true;
},
handleDownload(file) {console.log(file);
},

// 图片上传胜利的回调函数
    uploadsuccess(response, file, fileList) {// console.log(response);
      console.log(file);
      // console.log(fileList);
      // 存储 上传图片的 url
      // this.files = file;
      this.files = file.raw;
    },

7. 数据申请代码:

accountcoconfig() {let formData = new FormData();
      const param = {
        account: this.$store.state.account,
        nickname: this.form.Companynickname,
        address: this.form.Correspondenceaddress,
        contact: this.form.linkman,
        contactInfo: this.form.contactway,
        remark: this.form.Introductiontothe,
        email: this.form.email,
      };

      formData.append("param", JSON.stringify(param));
      formData.append("file", this.files);
      console.log(formData);
      accountcoconfig(formData).then((res) => {console.log(res);
      });
    },

8. 传参成果

9. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。