使用原生手机拍照，优化企业微信拍照模糊问题

.env.development

@@ -6,6 +6,10 @@ ENV = 'development'
 VUE_APP_Target=https://ssbsfatest.nipponpaint.com.cn
 VUE_APP_SSB_LINK=http://suishenbangtest.nipponpaint.com.cn
 VUE_APP_XD_LINK=http://b2btest.nipponpaint.com.cn
+# ali-oss 配置
+VUE_APP_OSS_ACCESS_KEY_ID="LTAI5tG1DTJFA16BHkzHVxjz"
+VUE_APP_OSS_ACCESS_KEY_SECRET="5brWKKEACiUsKPJeUXlB7r2iZGQHNF"
+
 # 门店拜访/开发环境
 #VUE_APP_BASE_API = '/dev-api/'
 VUE_APP_BASE_API = '/ssbsfa/'

.env.test

@@ -12,6 +12,9 @@ VUE_APP_Target=https://ssbsfatest.nipponpaint.com.cn
 VUE_APP_SSB_LINK=http://suishenbangtest.nipponpaint.com.cn
 VUE_APP_XD_LINK=http://b2btest.nipponpaint.com.cn
 VUE_APP_BASE_API = '/ssbsfa/'
+# ali-oss 配置
+VUE_APP_OSS_ACCESS_KEY_ID="LTAI5tG1DTJFA16BHkzHVxjz"
+VUE_APP_OSS_ACCESS_KEY_SECRET="5brWKKEACiUsKPJeUXlB7r2iZGQHNF"
 
 # 正式环境
 # VUE_APP_Target=https://ssbsfa.nipponpaint.com.cn

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@vant/touch-emulator": "^1.4.0",
+    "ali-oss": "^6.22.0",
     "axios": "^0.24.0",
     "axios-jsonp": "^1.0.4",
     "clipboard": "^2.0.11",

src/components/H5Camera.vue

@@ -20,6 +20,7 @@ export default {
       let reader = new FileReader();
       reader.onload = (e) => {
         let dataURL = e.target.result;
+        this.$emit('getImg', dataURL);
         // console.log(dataURL);
         // 在此处对 dataURL 进行操作，例如显示图片
       };

src/components/uploadVNormal.vue

@@ -5,7 +5,7 @@
       <van-icon class="photo photos" name="photograph" size="22px" color="#969696" />
     </div> -->
     <!-- 原生自带拍照 -->
-    <H5Camera />
+    <H5Camera @getImg="getImg" />
     <div id="allmap"></div>
     <div class="mask" v-if="progressFlag">
       <el-progress
@@ -33,6 +33,7 @@ import { addstorePhoto, addVisitsPosition, addPhotoToDB } from '@/api/index';
 import imageAIVerifyErr from './imageAIVerifyErr';
 import H5Camera from '@/components/H5Camera';
 import axios from 'axios';
+import uploadAliOss from '@/utils/uploadAliOss';
 
 export default {
   name: 'uploadImg',
@@ -130,6 +131,11 @@ export default {
     };
   },
   methods: {
+    // 原生H5拍照图片
+    // url: base64
+    getImg(base64) {
+      uploadAliOss(base64, '测试111');
+    },
     uploadImg() {
       var map = new TMap.Map('allmap', {
         zoom: 14,

src/utils/ali-oss.js

@@ -0,0 +1,22 @@
+const OSS = require('ali-oss');
+
+// aliyun:
+//   oss:
+//     endpoint: oss-cn-shanghai-internal.aliyuncs.com # oss对外服务的访问域名
+//     cdnpoint: cdn-svs-test.nipponpaint.com.cn
+//     accessKeyId: LTAI5tG1DTJFA16BHkzHVxjz # 访问身份验证中用到用户标识
+//     accessKeySecret: 5brWKKEACiUsKPJeUXlB7r2iZGQHNF # 用户用于加密签名字符串和oss用来验证签名字符串的密钥
+//     bucketName: svs-test
+//     publicRead: false
+const client = new OSS({
+  // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
+  accessKeyId: process.env.VUE_APP_OSS_ACCESS_KEY_ID,
+  accessKeySecret: process.env.VUE_APP_OSS_ACCESS_KEY_SECRET,
+  // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
+  region: 'oss-cn-shanghai',
+  authorizationV4: true,
+  // yourBucketName填写Bucket名称。
+  bucket: 'svs-test',
+});
+
+export default client;

src/utils/uploadAliOss copy.js

@@ -0,0 +1,50 @@
+import client from '@/utils/ali-oss';
+
+// 自定义请求头
+const headers = {
+  // 指定Object的存储类型。
+  'x-oss-storage-class': 'Standard',
+  // 指定Object的访问权限。
+  'x-oss-object-acl': 'private',
+  // 通过文件URL访问文件时，指定以附件形式下载文件，下载后的文件名称定义为example.txt。
+  'Content-Disposition': 'attachment; filename="example.txt"',
+  // 设置Object的标签，可同时设置多个标签。
+  'x-oss-tagging': 'Tag1=1&Tag2=2',
+  // 指定PutObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
+  'x-oss-forbid-overwrite': 'true',
+};
+
+async function uploadAliOss(data) {
+  try {
+    // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
+    // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
+    console.log(blobToFile(base64ToBlob(data), 'h5UploadAliOss'));
+    const result = await client.put(
+      'h5UploadAliOss', //获取一个随机的文件名
+      blobToFile(base64ToBlob(data), 'h5UploadAliOss') //base64转file对象
+      // { 'Content-Type': 'image/jpeg' } //设置Content-Type
+    );
+    console.log(result);
+  } catch (e) {
+    console.log(e);
+  }
+}
+export function base64ToBlob(base64Data) {
+  let arr = base64Data.split(','),
+    fileType = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    l = bstr.length,
+    u8Arr = new Uint8Array(l);
+  while (l--) {
+    u8Arr[l] = bstr.charCodeAt(l);
+  }
+  return new Blob([u8Arr], {
+    type: fileType,
+  });
+}
+export function blobToFile(newBlob, fileName) {
+  newBlob.lastModifiedDate = new Date();
+  newBlob.name = fileName;
+  return newBlob;
+}
+export default uploadAliOss;

src/utils/uploadAliOss.js

@@ -0,0 +1,46 @@
+import client from '@/utils/ali-oss';
+
+// 自定义请求头
+const headers = {
+  // 指定Object的存储类型。
+  'x-oss-storage-class': 'Standard',
+  // 指定Object的访问权限。
+  'x-oss-object-acl': 'private',
+  // 通过文件URL访问文件时，指定以附件形式下载文件，下载后的文件名称定义为example.txt。
+  'Content-Disposition': 'attachment; filename="example.txt"',
+  // 设置Object的标签，可同时设置多个标签。
+  'x-oss-tagging': 'Tag1=1&Tag2=2',
+  // 指定PutObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
+  'x-oss-forbid-overwrite': 'true',
+};
+
+export function dataURLtoFile(dataurl, filename) {
+  let arr = dataurl.split(','),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, { type: mime });
+}
+
+const progress = (p, _checkpoint) => {
+  // Object的上传进度。
+  console.log(p);
+  // 分片上传的断点信息。
+  console.log(_checkpoint);
+};
+function uploadAliOss(base64, filename) {
+  let file = dataURLtoFile(base64, filename);
+  client
+    .multipartUpload(filename, file, { progress })
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+export default uploadAliOss;