关于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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。