iview upload组件使用实现图片上传

737296

已于 2022-07-27 10:05:05 修改

阅读量799

点赞数

分类专栏： Vue 文章标签： view design java 开发语言

于 2022-07-27 09:53:55 首次发布

本文链接：https://blog.csdn.net/weixin_38704390/article/details/126008068

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在用vue开发中用到iview，其中官网中实例代码只有空壳子，并不能真正意义上实现上传。需要手动修改js部分。

页面展示部分

<Upload action="//jsonplaceholder.typicode.com/posts/"
                            :form="['jpg', 'jpeg', 'png', 'gif']"
                            :before-upload="handleUpload">
                      <Button icon="ios-cloud-upload-outline"
                              @click="filesign(6)">上传图片</Button>
                    </Upload>
                    <div v-if="file !== null && fileSign==6">
                      待上传文件名: {{ file.name }}
                      <a type="text"
                         @click="upload('businessLicenseCopy')"
                         :loading="loadingStatus">{{
                          loadingStatus ? "上传中" : "上传"
                      }}</a>
                    </div>

js部分代码

// 上传按钮状态（data数据）
loadingStatus: false,
file:null,
url:'你自己地址'

// 上传图片钩子函数
    handleUpload (file) {
      this.file = file
      return false
    },

// 上传图片
    upload (sign) {
      let fileFormData = new FormData()
      this.loadingStatus = true
      fileFormData.append('file', this.file)
      
      console.log(fileFormData)
      let requestConfig = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$http.post(this.url, fileFormData, requestConfig).then((res) => {
        this.file = null
        this.loadingStatus = false
        if (res.data['code'] === '200') {
          // 分开标记多个上传的图片id赋值
          if (sign === 'businessLicenseCopy') {
            // 营业执照信息图片上传
            console.log('当前id', this.formAllData['businessLicenseCopy'])
            // 获取存储成功的图片id
            this.formAllData['businessLicenseCopy'] = res.data.data['mediaId']
            console.log('返回id', this.formAllData.businessLicenseCopy)
          }       
          this.$Message.success(res.data['msg'])
        } else {
          this.$Message.error(res.data['msg'])
        }
        // 上传完立马刷新图片——图片回显（图片获取见目录另一篇文章）
        this.download()
      })
    },

以上就是整个上传图片的流程，有不懂的可以随时提问，看到就会回复。

下面的没有用啊！

下面的没有用啊！
写够500字，否则
文章质量提示
文章质量提示
此文章质量较低，不会获得较多流量扶持！可能的原因为：篇幅太短，广告涉嫌违规，外链过多，缺少代码，图片涉嫌违规
文章质量提示
此文章质量较低，不会获得较多流量扶持！可能的原因为：篇幅太短，广告涉嫌违规，外链过多，缺少代码，图片涉嫌违规
此文章质量较低，不会获得较多流量扶持！可能的原因为：篇幅太短，广告涉嫌违规，外链过多，缺少代码，图片涉嫌违规

此文章质量较低，不会获得较多流量扶持！可能的原因为：篇幅太短，广告涉嫌违规，外链过多，缺少代码，图片涉嫌违规
文章质量提示
此文章质量较低，不会获得较多流量扶持！可能的原因为：篇幅太短，广告涉嫌违规，外链过多，缺少代码，图片涉嫌违规
此文章质量较低，不会获得较多流量扶持！可能的原因为：篇幅太短，广告涉嫌违规，外链过多，缺少代码，图片涉嫌违规