if 里的上传图片，不一样的地方是 [dataList[0].getAsFile()] ，因为为了统一格式，方便 uploadImagesFile 函数进行处理，我加上了 [] ，使之成为数组。 dataList[0].getAsFile() 就是获取文件实例了。
上传
上传就有一点麻烦了：
uploadImagesFile (simplemde, files) { // 把每个文件实例使用FormData进行包装一下，然后返回一个数组 let params = files.map(file => { let param = new FormData() param.append('file', file, file.name) return param }) let makeRequest = params => { return this.$http.post('/Api/upload', params) } let requests = params.map(makeRequest) this.$http.spread = callback => { return arr => { return callback.apply(null, arr) } } // 服务端返回的格式是{state: Boolean, data: String} // state为false时，data就是返回的错误信息 // state为true时，data是图片上传后url地址，这个地址是针对网站的绝对路径。如下： // /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png Promise.all(requests) .then(this.$http.spread((...resps) => { for (let i = 0; i < resps.length; i++) { let {state, data} = resps[i].data if (!state) { // 弹窗显示data的错误信息 continue } let url = `` // 拼接成markdown语法 let content = simplemde.getValue() simplemde.setValue(content + url + '\n') // 和编辑框之前的内容进行拼接 } })) }
因为我是把 axiox 封装成vue插件来使用，这样会导致， this.$http 是实例化后的，而不是他本身。 axios 维护者说的解决方案是，重新引入 axios 包，来使用。但是我觉得没有必要。 axios.all 内部是 Promise.all 。 axios.spread 实现代码比较少，就直接拿过来，重新赋值给 axios 就好了
所以上面有段代码是
Promise.all(requests)
.then(this.$http.spread((...resps) => {
// code
})
把这段代码翻译一下就是
axios.all(requests) .then(axios.spread((...resps) => { // code })
关于这个问题，请看下官方的解释：axios-all-is-not-a-function-inside-vue-component 。也可以看下 axios 的代码：
这个问题，暂时就不深究了，我们回到刚刚的话题上。
上面我说到当state为true时，data是文件相对于网站的绝对路径，如: /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png
如果我们需要进行拼接一下，所以就有了  这段代码进行拼接。最后的两行是获取指的获取之前的内容，然后在追加url地址。
您可能感兴趣的文章: