FormData 上传图片 vue

最新推荐文章于 2024-08-22 17:22:09 发布

原创最新推荐文章于 2024-08-22 17:22:09 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

45 篇文章

订阅专栏

本文介绍如何在Vue.js应用中利用FormData对象上传图片，包括处理文件选择、创建FormData实例、发送AJAX请求到服务器的过程，以及前端验证和错误处理的实现。

uploadPhoto(event){
      var $file = event.currentTarget;
      var file = $file.files;
      let totallen = this.fileList.length+file.length
      if(totallen>4){
        this.$toast('最多上传4张图片！')
          return false
      }
      for (var i = 0; i < file.length; i++) {
        var formData = new FormData()
        // 文件名称，文件对象
        if (file[i].type !== 'image/jpeg' && file[i].type !== 'image/png') {
          this.$toast('只允许上传jpg/png格式的图片！')
          return false
        }
        formData.append("uploadFile", file[i])
        formData.append("tenantId", 'visit')
        formData.append("type",file[i].type.replace('image/',''))
      this.$toast.loading({
        message: "加载中...",
        duration: 0,
        forbidClick: true,
      });
      axios({
          method: 'post',
          url:this.url,
          data:formData,
          headers: {'Content-Type': 'multipart/form-data; boundary=something','token':window.localStorage.getItem('userToken')},
          timeout: 10000
        }).then((res)=>{
          this.$toast.clear();
            if(res.status == 200){
              res.data.forEach(item=>{
                this.fileList.push({
                  localPath: item.path,
                  uploadUrl: item.path,
                  checkinId: this.recId,
                  path: item.path,
                  createTime: new Date(),
                  createUser: this.userName,
                  createUserName: this.realName
                })
              })
            } else {
              this.$toast("上传失败");
            }
          })
          .catch(function (error) {
            this.$toast("上传失败");
          });
      }
    },

 <div
                class="upload-img upload-button"
                v-if="fileList.length<4"
              >
              <input type = "file" accept="image/*" multiple   class='inputbox' @change='uploadPhoto'/>
              </div>