antdui上传图片转base64

时间:26-05-25 栏目:Javascript 作者:zongyan86 评论:0 点击: 4 次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
html:
 <a-upload
                                            v-decorator="[
                                              `imgUrl`,
                                              {
                                                rules: [
                                                  {
                                                    required: false,
                                                    message: '请选择图片'
                                                  }
                                                ]
                                              }
                                            ]"
                                            :accept="engTypeMsg"
                                            listType="picture-card"
                                            :fileList="fileList"
                                            @change="handleImageChange"
                                            :custom-request="customRequest"
                                            @preview="handlePreview"
                                            :beforeUpload="
                                              file => {
                                                beforeUpload(file);
                                              }
                                            "
                                          >
                                          <div v-if="fileList.length < 4">
                                            <!--无图片-->
                                            <a-icon type="plus"/>
                                            <div class="ant-upload-text">上传图片</div>
                                          </div>
                                      </a-upload>

method:
 //新增问题-上传图片-生成uid
    genId(length) {
      return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36)
    },
    customRequest({ action, file, onSuccess, onError, onProgress }) {
        new Promise(resolve => {
          // 是个坑,必须加
          if (file.reject) {
            return false;
          }
          const fileReader = new FileReader()
          fileReader.readAsDataURL(file)
          fileReader.onload = () => {
            let index = {
              uid: this.genId(5),
              name: file.name,
              status: 'done',
              //imageBase64: fileReader.result,
              url: fileReader.result
            }
            this.fileList = [...this.fileList.filter(item => item.status === 'done'), index]
            this.$message.success('文件上传成功!')
            // this.handleChange1()
            resolve(fileReader.result)
          }
        })
    },
    //上传图片获取base64
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
      })
    },
    //新增问题-上传图片
    handleImageChange({fileList,file}) {
      if (file.reject) {
        return false;
      }
      //let fileList = [...info.fileList]
      this.fileList = fileList;
    },
   async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await this.getBase64(file.originFileObj)
        }
        this.imgObj = {
          imageBase64: file.url || file.preview
        };
        this.previewVisible = true
    },


声明: 本文由( zongyan86 )原创编译,转载请保留链接: antdui上传图片转base64

关注我们