关于富文本上传图片多选的处理

image: function image() {
                          var _this3 = this;
                          const input = document.createElement('input');
                          let limit = 500; //上传图片限制500K
                          let imgArr = [];
                          let backupConditions = true;
                          let insertionConditions = true;
                          let imgNum = 0;

                          input.setAttribute('type', 'file');
                          input.setAttribute('accept', 'image/*');
                          input.setAttribute('multiple', 'multiple');
                          input.click();

                          input.onchange = async () => {
                            let total = input.files.length;
                            Array.from(input.files).forEach((item, index) => {
                              //上传图片限制500
                              if (item.size > (1024 * 1024 * limit) / 1024) {
                                failTip(`${item.name}文件过大,请上传小于${limit}K的图片`, 5);
                                backupConditions = false;
                                return false;
                              }
                              /*
                               *上传的图片中有大于500K的不执行请求,backupConditions为false
                               */
                              if (index == total - 1) {
                                if (backupConditions) {
                                  Array.from(input.files).forEach((item, index) => {
                                    const formData = new FormData();
                                    formData.append('file', item, item.name);
                                    fetch(
                                      `${sldservice}v3/oss/common/upload?source=setting&index=${index}`,
                                      {
                                        credentials: 'include',
                                        method: 'POST',
                                        headers: {},
                                        body: formData,
                                      }
                                    )
                                      .then(response => response.json())
                                      .then(res => {
                                        if (res.state == 200) {
                                          let idx = res.data.index,
                                            url = res.data.url;
                                          imgNum += 1;
                                          imgArr[idx] = res.data.url;
                                          if (
                                            imgArr.length == total &&
                                            imgNum == total &&
                                            insertionConditions
                                          ) {
                                            insertionConditions = false;
                                            imgArr.forEach((items, i) => {
                                              var range = _this3.quill.getSelection(true);
                                              _this3.quill.updateContents(
                                                new _quillDelta2.default()
                                                  .retain(i + range.index)
                                                  .delete(range.length)
                                                  .insert({ image: items }),
                                                _emitter2.default.sources.USER
                                              );
                                              if (i == total) {
                                                insertionConditions = true;
                                                imgNum = 0;
                                                imgArr = [];
                                              }
                                            });
                                            input.value = '';
                                          }
                                        }
                                      });
                                  });
                                }
                              }
                            });
                          };
                        },

 

posted @ 2022-02-14 09:50  山河&统一  阅读(188)  评论(0)    收藏  举报