diff --git a/src/App.vue b/src/App.vue index 82fb908..63d3d93 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@ * @Author: astar * @Date: 2020-09-09 16:50:59 * @LastEditors: astar - * @LastEditTime: 2021-07-04 17:40:39 + * @LastEditTime: 2022-01-15 02:19:00 * @Description: 入口页面 * @FilePath: \vue-chat\src\App.vue --> @@ -14,7 +14,23 @@ diff --git a/src/components/uploadImg/index.vue b/src/components/uploadImg/index.vue index fc91cb1..2556942 100644 --- a/src/components/uploadImg/index.vue +++ b/src/components/uploadImg/index.vue @@ -62,26 +62,43 @@ export default { this.$refs.input.click(); }, change (e) { - const _this = this; - var fileReader = new FileReader(); this.file = e.target.files[0]; - fileReader.readAsDataURL(this.file); - fileReader.onload = function () { - _this.dataURL = this.result; - _this.$emit('change', this.result); + this.dataURL.startsWith('blob:') && URL.revokeObjectURL(this.dataURL) + this.dataURL = URL.createObjectURL(this.file); + this.$emit('change', this.dataURL); + }, + // 切片 + sliceToChunks (file, piece = 1024 * 1024 * 5) { + console.log(file) + let totalSize = file.size + let start = 0 + let end = piece + let chunks = [] + while (start < totalSize) { + chunks.push(file.slice(start, end)) + start = end + end = end + piece } + return chunks }, - upload () { - // return qiniuTokenReq().then((res) => { - // let token = res.data.token; - // const formData = new FormData(); - // formData.append('token', token); - // formData.append('file', this.file); - // return qiniuUploadReq(formData); - // }) - const formData = new FormData(); - formData.append('file', this.file); - return uploadImg(formData, { headers: { 'content-type': 'multipart/form-data' }, responseType: 'blob', emulateJSON: true }).then(res => res.data); + // 分片上传 + async upload () { + let file = this.file + let chunks = this.sliceToChunks(file) + let promises = [] + for (let i = 0, len = chunks.length; i < len; i++) { + let formData = new FormData(); + formData.append('total', file.size) + formData.append('file', chunks[i]) + formData.append('index', i) + // 可以算个哈希值 + formData.append('sign', `${file.lastModified}${file.size}.${file.name.split('.').pop()}`) + promises.push(uploadImg(formData, { headers: { 'content-type': 'multipart/form-data' } }).then(({ data }) => data)) + } + const res = await Promise.all(promises.map(p => p.catch(e => { + console.log(e) + }))); + return res[0]; } } } diff --git a/src/config/index.js b/src/config/index.js index af69efe..e1971b7 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -7,7 +7,7 @@ */ let baseURL = '' if (process.env.NODE_ENV === 'development') { - baseURL = 'http://localhost:2000/test-proxy' + baseURL = 'http://192.168.0.100:2000/test-proxy' } else { baseURL = 'https://hello-astar.asia/api' } diff --git a/vue.config.js b/vue.config.js index f06bbc9..48551b1 100644 --- a/vue.config.js +++ b/vue.config.js @@ -25,7 +25,7 @@ module.exports = { // https: true, proxy: { '/test-proxy': { - target: 'http://localhost:3000', + target: 'http://192.168.0.100:3000', pathRewrite: { '^/test-proxy': '' }