图片上传

src/components/input/normalArea.vue

@@ -81,18 +81,18 @@ export default {
       this.$emit('update:value', this.inputValue)
       this.$emit('change', this.inputValue)
     },
-    getImages(node) {
+    async getImages(node) { // 获取图片
       const reg = /<img.*?(?:>|\/>)/gi
       const imgArr = node.match(reg) // 获取图片数组
       if (imgArr && imgArr.length > 0) {
-        imgArr.forEach((value, key) => {
+        for (const value of imgArr) {
           const regSrc = /<img.*?src="(.*?)".*?\/?>/i
           const src = value.match(regSrc)
           if (src[1].indexOf('base64') > 0) {
             const file = this.dataURLtoFile(src[1], this.generateMixed(15) + '.png', 'image/png')
-            this.successUpload(`<img src="" />`, key)
+            await this.beforeUpload(file)
           }
-        })
+        }
       }
     },
     generateMixed(len) { // 图片随机名字生成
@@ -114,6 +114,22 @@ export default {
       }
       return new File([u8arr], filename, { type: contentType })
     },
+    async beforeUpload(file) { // 上传前
+      try {
+        const res = await this.updateFile(file)
+        // const res = { data: { url: '//pt-starimg.didistatic.com/static/starimg/node/elczkYKpzb1598698408779.png' }}
+        let url = ''
+        if (res.data) {
+          url = 'http:' + res.data.url
+        }
+        const img = `<img src="${url}" />`
+        console.log(img)
+        this.successUpload(img)
+      } catch (error) {
+        this.successUpload('')
+      }
+      return new Promise((resolve, reject) => { resolve() })
+    },
     updateFile(file) { // 上传图片
       const param = new FormData() // 创建form对象
       param.append('file', file)// 通过append向form对象添加数据
@@ -132,19 +148,16 @@ export default {
           })
       })
     },
-    async successUpload(file, index) { // 图片上传成功
+    async successUpload(file) { // 图片上传成功
       const reg = /<img.*?(?:>|\/>)/gi
       let newStr = ''
       this.inputValue.replace(reg, function(match, ...rest) {
-        // console.log(match, rest)
-        // console.log(rest[1].substring(0, rest[0]))
-        // console.log(rest[1].substring(rest[0] + match.length, rest[1].length))
-        // debugger
-        newStr = rest[1].substring(0, rest[0]) + rest[1].substring(rest[0] + match.length, rest[1].length)
-        return rest[1].substring(0, rest[0]) + rest[1].substring(rest[0] + match.length, rest[1].length)
+        newStr = rest[1].substring(0, rest[0]) + file + rest[1].substring(rest[0] + match.length, rest[1].length)
+        return rest[1].substring(0, rest[0]) + file + rest[1].substring(rest[0] + match.length, rest[1].length)
+      })
+      this.$nextTick(() => {
+        this.inputValue = newStr
       })
-      // this.inputValue = newStr
-      tinymce.activeEditor.setContent(newStr)
     }
   }
 }