图片上传调整为oss直传

1 year ago · 2820f3e2c3
5 changed files with 159 additions and 40 deletions
--- a/api/ossUpload.js
+++ b/api/ossUpload.js
@ -0,0 +1,73 @@
+import request from '@/utils/request/request'
+import urlRequest from '@/utils/request'
+
+import storage from '@/utils/storage'
+import dayjs from "dayjs"
+
+const ossRequest = new request({
+    // 接口请求地址
+    baseUrl: 'https://server.jimeigroup.cn/api/',
+    // 服务器本地上传文件地址
+    fileUrl: 'https://server.jimeigroup.cn/api/',
+    // 服务器上传图片默认url
+    defaultUploadUrl: 'upload/image',
+    // 设置请求头（如果使用报错跨域问题，可能是content-type请求类型和后台那边设置的不一致）
+    header: {
+        'content-type': 'application/json;charset=utf-8'
+    },
+    // 请求超时时间, 单位ms（默认15000）
+    timeout: 15000,
+    // 默认配置（可不写）
+    config: {
+        // 是否自动提示错误
+        isPrompt: true,
+        // 是否显示加载动画
+        load: true,
+        // 是否使用数据工厂
+        isFactory: true
+    }
+})
+
+export const ossUploadFile = async (file) => {
+    console.log(file)
+    // 获取临时凭证
+    let sts = storage.get('sts');
+    if (!sts) {
+        const stsRes = await ossRequest.get('oss/getPostForm')
+        sts = stsRes.data.data
+        storage.set('sts', sts, 60)
+    }
+    const {polocyBase64, signature} = sts;
+    var suffix = file.name.substring(file.name.lastIndexOf("."));
+    const fileName = dayjs().format('YYYYMMDD') + '/' + uni.$u.guid() + suffix;
+    return new Promise((reso, rej) => {
+        uni.uploadFile({
+            url: 'https://oss.jimeigroup.cn', // 开发者服务器的URL。
+            filePath: file.path,
+            name: 'file', // 必须填file。
+            formData: {
+                key: fileName,
+                'policy': polocyBase64,
+                'OSSAccessKeyId': 'LTAI5t8UTh8CTXEi2dYxobhj',
+                'success_action_status': '200', //让服务端返回200,不然，默认会返回204
+                'signature': signature,
+                // 'x-oss-security-token': this.stsToken,
+            },
+            success: () => {
+                urlRequest.post('upload/addFile', {
+                    storage: 'aliyun',
+                    domain: 'https://oss.jimeigroup.cn',
+                    file_name: file.name,
+                    file_path: fileName,
+                    file_size: file.size,
+                    file_ext: suffix
+                }).then(res => {
+                    reso(res)
+                })
+            },
+            fail: err => {
+                rej(err)
+            }
+        });
+    })
+}
--- a/api/upload.js
+++ b/api/upload.js
@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import {ossUploadFile} from "./ossUpload";

 // api地址
 const api = {
@ -10,15 +11,26 @@ export const goods_detail_image = (files) => {
    // 文件上传大小, 2M
    const maxSize = 1024 * 1024 * 20000
    // 执行上传
-  return new Promise((resolve, reject) => {
-    request.urlFileUpload({ files, maxSize })
-      .then(result => {
-        const fileIds = result.map(item => {
-          return item.data.fileInfo.preview_url
+    // return new Promise((resolve, reject) => {
+    //     request.urlFileUpload({files, maxSize})
+    //         .then(result => {
+    //             const fileIds = result.map(item => {
+    //                 return item.data.fileInfo.preview_url
+    //             })
+    //             resolve(fileIds, result)
+    //         })
+    //         .catch(reject)
+    // })
+    return new Promise(resolve => {
+        const fileIds = []
+        Promise.all(
+            files.map(async file => {
+                const {data: {fileInfo: {file_id}}} = await ossUploadFile(file)
+                fileIds.push(file_id)
            })
-        resolve(fileIds, result)
+        ).then(() => {
+            resolve(fileIds)
        })
-      .catch(reject)
    })
 }
 // 图片上传
@ -26,32 +38,53 @@ export const image = (files) => {
    // 文件上传大小, 2M
    const maxSize = 1024 * 1024 * 20000
    // 执行上传
-  return new Promise((resolve, reject) => {
-    request.urlFileUpload({ files, maxSize })
-      .then(result => {
-        const fileIds = result.map(item => {
-          return item.data.fileInfo.file_id
+    // return new Promise((resolve, reject) => {
+    //   request.urlFileUpload({ files, maxSize })
+    //     .then(result => {
+    //       const fileIds = result.map(item => {
+    //         return item.data.fileInfo.file_id
+    //       })
+    //       resolve(fileIds, result)
+    //     })
+    //     .catch(reject)
+    // })
+    return new Promise(resolve => {
+        const fileIds = []
+        Promise.all(
+            files.map(async file => {
+                const {data: {fileInfo: {file_id}}} = await ossUploadFile(file)
+                fileIds.push(file_id)
            })
-        resolve(fileIds, result)
+        ).then(() => {
+            resolve(fileIds)
        })
-      .catch(reject)
    })
 }


-
 export const images = (files) => {
    // 文件上传大小, 2M
    const maxSize = 1024 * 1024 * 20000
    // 执行上传
-  return new Promise((resolve, reject) => {
-    request.urlFileUpload({ files, maxSize })
-      .then(result => {
-        const fileIds = result.map(item => {
-          return item.data.fileInfo
+    // return new Promise((resolve, reject) => {
+    //     request.urlFileUpload({files, maxSize})
+    //         .then(result => {
+    //             const fileIds = result.map(item => {
+    //                 return item.data.fileInfo
+    //             })
+    //             resolve(fileIds, result)
+    //         })
+    //         .catch(reject)
+    // })
+    return new Promise(resolve => {
+        const fileIds = []
+        Promise.all(
+            files.map(async file => {
+                const {data: {fileInfo: {file_id}}} = await ossUploadFile(file)
+                fileIds.push(file_id)
            })
-        resolve(fileIds, result)
+        ).then(() => {
+            resolve(fileIds)
        })
-      .catch(reject)
    })
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -6,6 +6,7 @@
    "": {
      "dependencies": {
        "@climblee/uv-ui": "^1.1.19-4",
+        "dayjs": "^1.11.10",
        "weixin-js-sdk": "^1.6.5"
      }
    },
@ -14,6 +15,11 @@
      "resolved": "https://registry.npmjs.org/@climblee/uv-ui/-/uv-ui-1.1.19-4.tgz",
      "integrity": "sha512-ZHip40iETfDT6CxjER0U9rZLpc6nDG3rBAOvC6amfep0XTr46oE1WfImYzbSe3ypxI+WbY2elftSV9Y9NMRM5w=="
    },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
    "node_modules/weixin-js-sdk": {
      "version": "1.6.5",
      "resolved": "https://registry.npmjs.org/weixin-js-sdk/-/weixin-js-sdk-1.6.5.tgz",
@ -26,6 +32,11 @@
      "resolved": "https://registry.npmjs.org/@climblee/uv-ui/-/uv-ui-1.1.19-4.tgz",
      "integrity": "sha512-ZHip40iETfDT6CxjER0U9rZLpc6nDG3rBAOvC6amfep0XTr46oE1WfImYzbSe3ypxI+WbY2elftSV9Y9NMRM5w=="
    },
+    "dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
    "weixin-js-sdk": {
      "version": "1.6.5",
      "resolved": "https://registry.npmjs.org/weixin-js-sdk/-/weixin-js-sdk-1.6.5.tgz",
--- a/package.json
+++ b/package.json
@ -1,6 +1,7 @@
 {
  "dependencies": {
    "@climblee/uv-ui": "^1.1.19-4",
+    "dayjs": "^1.11.10",
    "weixin-js-sdk": "^1.6.5"
  }
 }
--- a/pages/user/shop/addgoods.vue
+++ b/pages/user/shop/addgoods.vue
@ -900,7 +900,7 @@
 						app.$toast(result.message)
 						setTimeout(() => {
 							app.disabled = false
-							uni.navigateBack()
+							// uni.navigateBack()
 						}, 1500)
 					})
 					.catch(err => app.disabled = false)
@ -930,6 +930,7 @@
 								UploadApi.image(file.images)
 									.then(fileIds => {
 										app.formData[index].uploaded = fileIds
+                                        console.log(app.formData[index].uploaded, fileIds)
 										resolve(fileIds)
 									})
 									.catch(reject)