|
|
@@ -1,541 +1,517 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <div class="upload-box">
|
|
|
- <slot>
|
|
|
- <ul>
|
|
|
- <li
|
|
|
- class="list_img"
|
|
|
- v-for="(item,index) in showImgList"
|
|
|
- :key="index"
|
|
|
- :style="{ width: size + 'rpx', height: size + 'rpx' }"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-if="isMain"
|
|
|
- class="main-btn"
|
|
|
- :class="{'mian': index == 0}"
|
|
|
- @click.stop="mainImg(index)"
|
|
|
- >主</div>
|
|
|
- <view class="iconfont icondelete" @click="delImg(index)"></view>
|
|
|
- <img
|
|
|
- :src="item"
|
|
|
- @click="viewImg(item)"
|
|
|
- :style="{ width: size + 'rpx', height: size + 'rpx' }"
|
|
|
- :mode="imgMode"
|
|
|
- v-if="!prefixShow"
|
|
|
- />
|
|
|
- <img
|
|
|
- :src="`${constant.imgUrl}/${item}`"
|
|
|
- @click="viewImg(item)"
|
|
|
- :style="{ width: size + 'rpx', height: size + 'rpx' }"
|
|
|
- :mode="imgMode"
|
|
|
- v-if="prefixShow"
|
|
|
- />
|
|
|
-
|
|
|
- </li>
|
|
|
- <li
|
|
|
- v-if="showImgList.length < num && (multiple || showImgList.length == 0)"
|
|
|
- class="uploadImg"
|
|
|
- @click="chooseImage"
|
|
|
- :style="{ width: size + 'rpx', height: size + 'rpx' }"
|
|
|
- >
|
|
|
- <view class="iconfont icontupiantianjia"></view>
|
|
|
- </li>
|
|
|
- <view style="white-space: nowarp;font-size: 24upx; color: #999;">图片大小不得超过1.5M</view>
|
|
|
- </ul>
|
|
|
- </slot>
|
|
|
- </div>
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+ <div class="upload-box">
|
|
|
+ <slot>
|
|
|
+ <ul>
|
|
|
+ <li class="list_img" v-for="(item,index) in showImgList" :key="index" :style="{ width: size + 'rpx', height: size + 'rpx' }">
|
|
|
+ <div v-if="isMain" class="main-btn" :class="{'mian': index == 0}" @click.stop="mainImg(index)">主</div>
|
|
|
+ <view class="iconfont icondelete" @click="delImg(index)"></view>
|
|
|
+ <img :src="item" @click="viewImg(item)" :style="{ width: size + 'rpx', height: size + 'rpx' }" :mode="imgMode" v-if="!prefixShow"/>
|
|
|
+ <img :src="`${constant.imgUrl}/${item}`" @click="viewImg(item)" :style="{ width: size + 'rpx', height: size + 'rpx' }" :mode="imgMode" v-if="prefixShow"/>
|
|
|
+
|
|
|
+ </li>
|
|
|
+ <li v-if="showImgList.length < num && (multiple || showImgList.length == 0)" class="uploadImg" @click="chooseImage" :style="{ width: size + 'rpx', height: size + 'rpx' }">
|
|
|
+ <view class="iconfont icontupiantianjia"></view>
|
|
|
+ </li>
|
|
|
+ <!--<view style="white-space: nowarp;font-size: 24upx; color: #999;">图片大小不得超过1.5M</view>-->
|
|
|
+ <view style="white-space: nowarp;font-size: 24upx; color: #999;">建议上传比例800X500</view>
|
|
|
+ </ul>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { uploadPic } from "@/api/common";
|
|
|
-import { picAdd } from "@/api/img-store";
|
|
|
-export default {
|
|
|
- name: "app-uploader",
|
|
|
- props: {
|
|
|
- // 传入的图片数组
|
|
|
- imgList: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- manualDel: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- // 图片的尺寸
|
|
|
- size: {
|
|
|
- type: Number,
|
|
|
- default: 200
|
|
|
- },
|
|
|
- // 上传图片数量
|
|
|
- num: {
|
|
|
- type: Number,
|
|
|
- default: 9
|
|
|
- },
|
|
|
- // 压缩图片
|
|
|
- compress: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- // 默认限制图片1.5M,单位为M
|
|
|
- maxSize: {
|
|
|
- type: String,
|
|
|
- default: "1.5M"
|
|
|
- },
|
|
|
- // 是否记录用户的选择记录
|
|
|
- isSave: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- // 记录用户的缓存字段
|
|
|
- saveStr: {
|
|
|
- type: String,
|
|
|
- default: "chooseImage"
|
|
|
- },
|
|
|
- // 是否转base64 受数据传输长度限制，不建议在组件中使用，如果一定要使用，在返回结果中自己转换
|
|
|
- isBase64: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- multiple: {
|
|
|
- // 是否多图上传
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- disabled: {
|
|
|
- // 是否只读
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- // 图片展示模式
|
|
|
- imgMode: {
|
|
|
- type: String,
|
|
|
- default: "scaleToFill"
|
|
|
- },
|
|
|
- // uploadPic: {
|
|
|
- // type: Function,
|
|
|
- // default: uploadPic
|
|
|
- // },
|
|
|
- // 是否显示主图切换
|
|
|
- isMain: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- //图库图片上传 shish 2020.5.18
|
|
|
- isStorage: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- // 是否需要拼接路径 true 需要 false 不需要
|
|
|
- prefixShow: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- constant: this.$constant,
|
|
|
- resultData: {},
|
|
|
- showImgList: [],
|
|
|
- base64ImgList: [],
|
|
|
- xssarr: [
|
|
|
- "data:",
|
|
|
- "text",
|
|
|
- "txt",
|
|
|
- "html",
|
|
|
- "js",
|
|
|
- "css",
|
|
|
- "json",
|
|
|
- "exe",
|
|
|
- "sql",
|
|
|
- "xml",
|
|
|
- "doc",
|
|
|
- "docx"
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if (this.isSave) {
|
|
|
- let str = uni.getStorageSync(this.saveStr);
|
|
|
- if (str !== "") {
|
|
|
- str = str.split(",");
|
|
|
- if (str.length > this.num) {
|
|
|
- str = str.slice(0, this.num);
|
|
|
- }
|
|
|
- this.showImgList = str;
|
|
|
- }
|
|
|
- } else {
|
|
|
- uni.removeStorageSync(this.saveStr);
|
|
|
- }
|
|
|
- this.showImgList = [...this.imgList];
|
|
|
- },
|
|
|
- methods: {
|
|
|
- chooseImage: async function() {
|
|
|
- if (this.disabled) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let that = this;
|
|
|
- let tempFilePaths = await that.getImage();
|
|
|
- await that.blobToBase64(tempFilePaths);
|
|
|
- await that.autoUploadImg();
|
|
|
- await that.postMsg();
|
|
|
- return this.showImgList;
|
|
|
- },
|
|
|
- postMsg() {
|
|
|
- this.$emit("update:imgList", this.showImgList);
|
|
|
- this.$emit("chooseImage", this.showImgList);
|
|
|
- this.$emit("resultData", this.resultData);
|
|
|
- },
|
|
|
+ import {uploadPic} from "@/api/common";
|
|
|
+ import {picAdd} from "@/api/img-store";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "app-uploader",
|
|
|
+ props: {
|
|
|
+ // 传入的图片数组
|
|
|
+ imgList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ manualDel: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // 图片的尺寸
|
|
|
+ size: {
|
|
|
+ type: Number,
|
|
|
+ default: 200
|
|
|
+ },
|
|
|
+ // 上传图片数量
|
|
|
+ num: {
|
|
|
+ type: Number,
|
|
|
+ default: 9
|
|
|
+ },
|
|
|
+ // 压缩图片
|
|
|
+ compress: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ // 默认限制图片1.5M,单位为M
|
|
|
+ maxSize: {
|
|
|
+ type: String,
|
|
|
+ default: "1.5M"
|
|
|
+ },
|
|
|
+ // 是否记录用户的选择记录
|
|
|
+ isSave: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // 记录用户的缓存字段
|
|
|
+ saveStr: {
|
|
|
+ type: String,
|
|
|
+ default: "chooseImage"
|
|
|
+ },
|
|
|
+ // 是否转base64 受数据传输长度限制，不建议在组件中使用，如果一定要使用，在返回结果中自己转换
|
|
|
+ isBase64: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ multiple: {
|
|
|
+ // 是否多图上传
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ disabled: {
|
|
|
+ // 是否只读
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // 图片展示模式
|
|
|
+ imgMode: {
|
|
|
+ type: String,
|
|
|
+ default: "scaleToFill"
|
|
|
+ },
|
|
|
+ // uploadPic: {
|
|
|
+ // type: Function,
|
|
|
+ // default: uploadPic
|
|
|
+ // },
|
|
|
+ // 是否显示主图切换
|
|
|
+ isMain: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ //图库图片上传 shish 2020.5.18
|
|
|
+ isStorage: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // 是否需要拼接路径 true 需要 false 不需要
|
|
|
+ prefixShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ resultData: {},
|
|
|
+ showImgList: [],
|
|
|
+ base64ImgList: [],
|
|
|
+ xssarr: [
|
|
|
+ "data:",
|
|
|
+ "text",
|
|
|
+ "txt",
|
|
|
+ "html",
|
|
|
+ "js",
|
|
|
+ "css",
|
|
|
+ "json",
|
|
|
+ "exe",
|
|
|
+ "sql",
|
|
|
+ "xml",
|
|
|
+ "doc",
|
|
|
+ "docx"
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.isSave) {
|
|
|
+ let str = uni.getStorageSync(this.saveStr);
|
|
|
+ if (str !== "") {
|
|
|
+ str = str.split(",");
|
|
|
+ if (str.length > this.num) {
|
|
|
+ str = str.slice(0, this.num);
|
|
|
+ }
|
|
|
+ this.showImgList = str;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.removeStorageSync(this.saveStr);
|
|
|
+ }
|
|
|
+ this.showImgList = [...this.imgList];
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ chooseImage: async function () {
|
|
|
+ if (this.disabled) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let that = this;
|
|
|
+ let tempFilePaths = await that.getImage();
|
|
|
+ await that.blobToBase64(tempFilePaths);
|
|
|
+ await that.autoUploadImg();
|
|
|
+ await that.postMsg();
|
|
|
+ return this.showImgList;
|
|
|
+ },
|
|
|
+ postMsg() {
|
|
|
+ this.$emit("update:imgList", this.showImgList);
|
|
|
+ this.$emit("chooseImage", this.showImgList);
|
|
|
+ this.$emit("resultData", this.resultData);
|
|
|
+ },
|
|
|
|
|
|
- autoUploadImg() {
|
|
|
- let that = this;
|
|
|
- let base64ImgList = that.base64ImgList;
|
|
|
- let params = {};
|
|
|
- if (base64ImgList.length === 1) {
|
|
|
- params["content"] = base64ImgList[0];
|
|
|
- } else {
|
|
|
- base64ImgList.forEach((item, index) => {
|
|
|
- params[`file[${index}][content]`] = item;
|
|
|
- });
|
|
|
- }
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- //这块需要优化，我只是简单复制了下 shish 2020.5.18
|
|
|
- if (this.isStorage) {
|
|
|
- picAdd({
|
|
|
- ...params
|
|
|
- }).then(res => {
|
|
|
- let imgArr
|
|
|
- if (res.code === 1) {
|
|
|
- if(this.prefixShow) {
|
|
|
- imgArr = [res.data.shortUrl]
|
|
|
- } else {
|
|
|
- imgArr = [res.data.url];
|
|
|
- }
|
|
|
- that.showImgList = [...that.showImgList, ...imgArr];
|
|
|
- that.resultData = res.data;
|
|
|
- this.$emit("currentUpload", imgArr);
|
|
|
- this.$emit("getResult", that.showImgList);
|
|
|
- resolve(that.showImgList);
|
|
|
- } else {
|
|
|
- reject(res);
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- uploadPic({
|
|
|
- ...params
|
|
|
- }).then(res => {
|
|
|
- let imgArr
|
|
|
- console.log(this.prefixShow)
|
|
|
- if (res.code === 1) {
|
|
|
- if(this.prefixShow) {
|
|
|
- console.log(11111, res.data.shortUrl)
|
|
|
- imgArr = [res.data.shortUrl]
|
|
|
- } else {
|
|
|
- imgArr = [res.data.url];
|
|
|
- }
|
|
|
- that.showImgList = [...that.showImgList, ...imgArr];
|
|
|
- console.log(222, that.showImgList)
|
|
|
- that.resultData = res.data;
|
|
|
- this.$emit("currentUpload", imgArr);
|
|
|
- this.$emit("getResult", that.showImgList);
|
|
|
- resolve(that.showImgList);
|
|
|
- } else {
|
|
|
- reject(res);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 转64
|
|
|
- async blobToBase64(tempFilePaths) {
|
|
|
- let that = this;
|
|
|
- that.base64ImgList = [];
|
|
|
- let newImgList = [...tempFilePaths];
|
|
|
- for (let i = 0; i < newImgList.length; i++) {
|
|
|
- let blob = newImgList[i];
|
|
|
- // 转64位后可以看文件类型 data:text/
|
|
|
- // #ifdef H5
|
|
|
- // 如果是服务器返回的图片不转base64
|
|
|
- // if (blob.indexOf('blob') !== 0) {
|
|
|
- // that.imgPathList.push(blob)
|
|
|
- // continue
|
|
|
- // }
|
|
|
- await that.h5b64(blob).then(res => {
|
|
|
- let startindex = res.indexOf(":");
|
|
|
- let endindex = res.indexOf("/");
|
|
|
- let type = res.substring(startindex + 1, endindex);
|
|
|
- if (that.xssarr.indexOf(type) === -1) {
|
|
|
- that.base64ImgList.push(res);
|
|
|
- }
|
|
|
- });
|
|
|
- // #endif
|
|
|
+ autoUploadImg() {
|
|
|
+ let that = this;
|
|
|
+ let base64ImgList = that.base64ImgList;
|
|
|
+ let params = {};
|
|
|
+ if (base64ImgList.length === 1) {
|
|
|
+ params["content"] = base64ImgList[0];
|
|
|
+ } else {
|
|
|
+ base64ImgList.forEach((item, index) => {
|
|
|
+ params[`file[${index}][content]`] = item;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ //这块需要优化，我只是简单复制了下 shish 2020.5.18
|
|
|
+ if (this.isStorage) {
|
|
|
+ picAdd({
|
|
|
+ ...params
|
|
|
+ }).then(res => {
|
|
|
+ let imgArr
|
|
|
+ if (res.code === 1) {
|
|
|
+ if (this.prefixShow) {
|
|
|
+ imgArr = [res.data.shortUrl]
|
|
|
+ } else {
|
|
|
+ imgArr = [res.data.url];
|
|
|
+ }
|
|
|
+ that.showImgList = [...that.showImgList, ...imgArr];
|
|
|
+ that.resultData = res.data;
|
|
|
+ this.$emit("currentUpload", imgArr);
|
|
|
+ this.$emit("getResult", that.showImgList);
|
|
|
+ resolve(that.showImgList);
|
|
|
+ } else {
|
|
|
+ reject(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uploadPic({
|
|
|
+ ...params
|
|
|
+ }).then(res => {
|
|
|
+ let imgArr
|
|
|
+ console.log(this.prefixShow)
|
|
|
+ if (res.code === 1) {
|
|
|
+ if (this.prefixShow) {
|
|
|
+ console.log(11111, res.data.shortUrl)
|
|
|
+ imgArr = [res.data.shortUrl]
|
|
|
+ } else {
|
|
|
+ imgArr = [res.data.url];
|
|
|
+ }
|
|
|
+ that.showImgList = [...that.showImgList, ...imgArr];
|
|
|
+ console.log(222, that.showImgList)
|
|
|
+ that.resultData = res.data;
|
|
|
+ this.$emit("currentUpload", imgArr);
|
|
|
+ this.$emit("getResult", that.showImgList);
|
|
|
+ resolve(that.showImgList);
|
|
|
+ } else {
|
|
|
+ reject(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 转64
|
|
|
+ async blobToBase64(tempFilePaths) {
|
|
|
+ let that = this;
|
|
|
+ that.base64ImgList = [];
|
|
|
+ let newImgList = [...tempFilePaths];
|
|
|
+ for (let i = 0; i < newImgList.length; i++) {
|
|
|
+ let blob = newImgList[i];
|
|
|
+ // 转64位后可以看文件类型 data:text/
|
|
|
+ // #ifdef H5
|
|
|
+ // 如果是服务器返回的图片不转base64
|
|
|
+ // if (blob.indexOf('blob') !== 0) {
|
|
|
+ // that.imgPathList.push(blob)
|
|
|
+ // continue
|
|
|
+ // }
|
|
|
+ await that.h5b64(blob).then(res => {
|
|
|
+ let startindex = res.indexOf(":");
|
|
|
+ let endindex = res.indexOf("/");
|
|
|
+ let type = res.substring(startindex + 1, endindex);
|
|
|
+ if (that.xssarr.indexOf(type) === -1) {
|
|
|
+ that.base64ImgList.push(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- // 微信临时文件 http://tmp/wx3a16...
|
|
|
- // if (blob.indexOf('http://tmp/') !== 0) {
|
|
|
- // that.imgPathList.push(blob)
|
|
|
- // continue
|
|
|
- // }
|
|
|
- await that.WEIXINb64(blob).then(res => {
|
|
|
- that.base64ImgList.push(res);
|
|
|
- });
|
|
|
- // #endif
|
|
|
- }
|
|
|
- },
|
|
|
- WEIXINb64(blob) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- uni.getFileSystemManager().readFile({
|
|
|
- filePath: blob, // 选择图片返回的相对路径
|
|
|
- encoding: "base64", // 编码格式
|
|
|
- success: function(res) {
|
|
|
- let b64str = "data:image/jpeg;base64," + res.data;
|
|
|
- resolve(b64str);
|
|
|
- },
|
|
|
- fail: function(err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- h5b64(blob) {
|
|
|
- return fetch(blob, {
|
|
|
- method: "GET",
|
|
|
- headers: new Headers({
|
|
|
- "Access-Control-Allow-Origin": "*",
|
|
|
- "Content-Type": "text/plain"
|
|
|
- }),
|
|
|
- mode: "no-cors"
|
|
|
- })
|
|
|
- .then(data => {
|
|
|
- const blob = data.blob();
|
|
|
- return blob;
|
|
|
- })
|
|
|
- .then(async blob => {
|
|
|
- let reader = new FileReader();
|
|
|
- reader.readAsDataURL(blob);
|
|
|
- // return await new Promise((res, reg) => {
|
|
|
- // reader.onloadend = function() {
|
|
|
- // const data = reader.result
|
|
|
- // res(data)
|
|
|
- // }
|
|
|
- // })
|
|
|
- return await new Promise((res, reg) => {
|
|
|
- reader.onloadend = function() {
|
|
|
- let data = reader.result;
|
|
|
- let str = data.substring(0, 30);
|
|
|
- if (str.indexOf(":image/jpeg;") == -1) {
|
|
|
- data = data.replace("data:;", "data:image/jpeg;");
|
|
|
- }
|
|
|
- res(data);
|
|
|
- };
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ // 微信临时文件 http://tmp/wx3a16...
|
|
|
+ // if (blob.indexOf('http://tmp/') !== 0) {
|
|
|
+ // that.imgPathList.push(blob)
|
|
|
+ // continue
|
|
|
+ // }
|
|
|
+ await that.WEIXINb64(blob).then(res => {
|
|
|
+ that.base64ImgList.push(res);
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ },
|
|
|
+ WEIXINb64(blob) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.getFileSystemManager().readFile({
|
|
|
+ filePath: blob, // 选择图片返回的相对路径
|
|
|
+ encoding: "base64", // 编码格式
|
|
|
+ success: function (res) {
|
|
|
+ let b64str = "data:image/jpeg;base64," + res.data;
|
|
|
+ resolve(b64str);
|
|
|
+ },
|
|
|
+ fail: function (err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ h5b64(blob) {
|
|
|
+ return fetch(blob, {
|
|
|
+ method: "GET",
|
|
|
+ headers: new Headers({
|
|
|
+ "Access-Control-Allow-Origin": "*",
|
|
|
+ "Content-Type": "text/plain"
|
|
|
+ }),
|
|
|
+ mode: "no-cors"
|
|
|
+ })
|
|
|
+ .then(data => {
|
|
|
+ const blob = data.blob();
|
|
|
+ return blob;
|
|
|
+ })
|
|
|
+ .then(async blob => {
|
|
|
+ let reader = new FileReader();
|
|
|
+ reader.readAsDataURL(blob);
|
|
|
+ // return await new Promise((res, reg) => {
|
|
|
+ // reader.onloadend = function() {
|
|
|
+ // const data = reader.result
|
|
|
+ // res(data)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ return await new Promise((res, reg) => {
|
|
|
+ reader.onloadend = function () {
|
|
|
+ let data = reader.result;
|
|
|
+ let str = data.substring(0, 30);
|
|
|
+ if (str.indexOf(":image/jpeg;") == -1) {
|
|
|
+ data = data.replace("data:;", "data:image/jpeg;");
|
|
|
+ }
|
|
|
+ res(data);
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- // 上传图片
|
|
|
- getImage() {
|
|
|
- let that = this;
|
|
|
- let showImgList = that.showImgList;
|
|
|
- let count = that.num - showImgList.length;
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- uni.chooseImage({
|
|
|
- count: this.multiple ? count : 1, // 默认9
|
|
|
- sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
|
|
|
- sourceType: ["album", "camera"], // 从相册选择
|
|
|
- success: async function(res) {
|
|
|
- await that.fileValid(res);
|
|
|
- var tempFilePaths = res.tempFilePaths;
|
|
|
- if (that.isSave) {
|
|
|
- uni.setStorageSync(that.saveStr, showImgList.join(","));
|
|
|
- }
|
|
|
- resolve(tempFilePaths);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- // 文件过滤
|
|
|
- fileValid(res) {
|
|
|
- let tempFiles = res.tempFiles;
|
|
|
- let tempFilePaths = res.tempFilePaths;
|
|
|
- let newtempFiles = [];
|
|
|
- let newtempFilePaths = [];
|
|
|
+ // 上传图片
|
|
|
+ getImage() {
|
|
|
+ let that = this;
|
|
|
+ let showImgList = that.showImgList;
|
|
|
+ let count = that.num - showImgList.length;
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: this.multiple ? count : 1, // 默认9
|
|
|
+ sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
|
|
|
+ sourceType: ["album", "camera"], // 从相册选择
|
|
|
+ success: async function (res) {
|
|
|
+ await that.fileValid(res);
|
|
|
+ var tempFilePaths = res.tempFilePaths;
|
|
|
+ if (that.isSave) {
|
|
|
+ uni.setStorageSync(that.saveStr, showImgList.join(","));
|
|
|
+ }
|
|
|
+ resolve(tempFilePaths);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 文件过滤
|
|
|
+ fileValid(res) {
|
|
|
+ let tempFiles = res.tempFiles;
|
|
|
+ let tempFilePaths = res.tempFilePaths;
|
|
|
+ let newtempFiles = [];
|
|
|
+ let newtempFilePaths = [];
|
|
|
|
|
|
- for (let i = 0; i < tempFiles.length; i++) {
|
|
|
- // 大于1.5m就不让上传
|
|
|
- let fileSize = tempFiles[i].size;
|
|
|
- if (fileSize > 1024 * 1024 * 1.5) {
|
|
|
- uni.showToast({
|
|
|
- title: "过滤不能大于1.5m的文件",
|
|
|
- duration: 2000,
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- continue;
|
|
|
- }
|
|
|
+ for (let i = 0; i < tempFiles.length; i++) {
|
|
|
+ // 大于1.5m就不让上传
|
|
|
+ let fileSize = tempFiles[i].size;
|
|
|
+ if (fileSize > 1024 * 1024 * 1.5) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "过滤不能大于1.5m的文件",
|
|
|
+ duration: 2000,
|
|
|
+ icon: "none"
|
|
|
+ });
|
|
|
+ continue;
|
|
|
+ }
|
|
|
|
|
|
- // 文件类型设置
|
|
|
- let spl = tempFiles[i].path.split(".");
|
|
|
- let fileType = spl[spl.length - 1];
|
|
|
- if (fileType && this.xssarr.indexOf(fileType) >= 0) {
|
|
|
- uni.showToast({
|
|
|
- title: "过滤不符合规范文件",
|
|
|
- duration: 2000,
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- continue;
|
|
|
- }
|
|
|
+ // 文件类型设置
|
|
|
+ let spl = tempFiles[i].path.split(".");
|
|
|
+ let fileType = spl[spl.length - 1];
|
|
|
+ if (fileType && this.xssarr.indexOf(fileType) >= 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "过滤不符合规范文件",
|
|
|
+ duration: 2000,
|
|
|
+ icon: "none"
|
|
|
+ });
|
|
|
+ continue;
|
|
|
+ }
|
|
|
|
|
|
- newtempFiles.push(tempFiles[i]);
|
|
|
- newtempFilePaths.push(tempFilePaths[i]);
|
|
|
- }
|
|
|
- res.tempFiles = newtempFiles;
|
|
|
- res.tempFilePaths = newtempFilePaths;
|
|
|
- },
|
|
|
- // 设为主图
|
|
|
- mainImg(index) {
|
|
|
- return false;
|
|
|
- if (index == 0){
|
|
|
- return false;
|
|
|
- }
|
|
|
- this.$msg("操作成功！");
|
|
|
- // let imgArr = JSON.parse(JSON.stringify(this.showImgList))
|
|
|
- let imgUrl = this.showImgList[index];
|
|
|
- this.showImgList.splice(index, 1);
|
|
|
- this.showImgList.unshift(imgUrl);
|
|
|
- // this.$emit('mainImg', index)
|
|
|
- this.postMsg();
|
|
|
- },
|
|
|
- // 删除
|
|
|
- async delImg(index) {
|
|
|
- if (this.disabled) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (this.isSave) {
|
|
|
- uni.setStorageSync(this.saveStr, this.showImgList.join(","));
|
|
|
- }
|
|
|
- if (!this.manualDel) {
|
|
|
- this.showImgList.splice(index, 1);
|
|
|
- } else {
|
|
|
- this.$emit("delImage", index);
|
|
|
- }
|
|
|
- await this.postMsg();
|
|
|
- },
|
|
|
- // 预览
|
|
|
- viewImg(path) {
|
|
|
- uni.previewImage({
|
|
|
- urls: this.showImgList,
|
|
|
- current: path
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取图片信息
|
|
|
- getImageInfo(image, cb) {
|
|
|
- uni.getImageInfo({
|
|
|
- src: image,
|
|
|
- success: function(image) {
|
|
|
- cb(image);
|
|
|
- return image;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 图片压缩
|
|
|
- compressImage() {
|
|
|
- uni.compressImage({
|
|
|
- src: image,
|
|
|
- quality: 80,
|
|
|
- complete: res => {}
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- imgList(val) {
|
|
|
- this.showImgList = [...val];
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
+ newtempFiles.push(tempFiles[i]);
|
|
|
+ newtempFilePaths.push(tempFilePaths[i]);
|
|
|
+ }
|
|
|
+ res.tempFiles = newtempFiles;
|
|
|
+ res.tempFilePaths = newtempFilePaths;
|
|
|
+ },
|
|
|
+ // 设为主图
|
|
|
+ mainImg(index) {
|
|
|
+ return false;
|
|
|
+ if (index == 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.$msg("操作成功！");
|
|
|
+ // let imgArr = JSON.parse(JSON.stringify(this.showImgList))
|
|
|
+ let imgUrl = this.showImgList[index];
|
|
|
+ this.showImgList.splice(index, 1);
|
|
|
+ this.showImgList.unshift(imgUrl);
|
|
|
+ // this.$emit('mainImg', index)
|
|
|
+ this.postMsg();
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ async delImg(index) {
|
|
|
+ if (this.disabled) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.isSave) {
|
|
|
+ uni.setStorageSync(this.saveStr, this.showImgList.join(","));
|
|
|
+ }
|
|
|
+ if (!this.manualDel) {
|
|
|
+ this.showImgList.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ this.$emit("delImage", index);
|
|
|
+ }
|
|
|
+ await this.postMsg();
|
|
|
+ },
|
|
|
+ // 预览
|
|
|
+ viewImg(path) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: this.showImgList,
|
|
|
+ current: path
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取图片信息
|
|
|
+ getImageInfo(image, cb) {
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: image,
|
|
|
+ success: function (image) {
|
|
|
+ cb(image);
|
|
|
+ return image;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 图片压缩
|
|
|
+ compressImage() {
|
|
|
+ uni.compressImage({
|
|
|
+ src: image,
|
|
|
+ quality: 80,
|
|
|
+ complete: res => {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ imgList(val) {
|
|
|
+ this.showImgList = [...val];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
-.uni-system-preview-image {
|
|
|
- background-color: rgba(0, 0, 0, 0.9);
|
|
|
+ .uni-system-preview-image {
|
|
|
+ background-color: rgba(0, 0, 0, 0.9);
|
|
|
|
|
|
- .uni-preview-image {
|
|
|
- max-width: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
+ .uni-preview-image {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.upload-box {
|
|
|
- padding: 0 30px;
|
|
|
- &:first-child {
|
|
|
- padding-left: 0;
|
|
|
- }
|
|
|
+ .upload-box {
|
|
|
+ padding: 0 30px;
|
|
|
+ &:first-child {
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
|
|
|
- & > ul {
|
|
|
- display: inline-block;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
+ & > ul {
|
|
|
+ display: inline-block;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
|
- & > li {
|
|
|
- list-style: none;
|
|
|
- width: 210px;
|
|
|
- height: 210px;
|
|
|
- margin: 0 20px 20px 0;
|
|
|
- position: relative;
|
|
|
- background-color: #fff;
|
|
|
+ & > li {
|
|
|
+ list-style: none;
|
|
|
+ width: 210px;
|
|
|
+ height: 210px;
|
|
|
+ margin: 0 20px 20px 0;
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
|
|
|
- .icondelete {
|
|
|
- font-size: 25px;
|
|
|
- z-index: 999;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- color: #fff;
|
|
|
- padding: 0 2px;
|
|
|
- background-color: rgba(0, 0, 0, 0.45);
|
|
|
- }
|
|
|
+ .icondelete {
|
|
|
+ font-size: 25px;
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 2px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.45);
|
|
|
+ }
|
|
|
|
|
|
- .main-btn {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 999;
|
|
|
- @include disFlex(center, center);
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- background-color: #ccc;
|
|
|
- color: #fff;
|
|
|
- &.mian {
|
|
|
- background-color: $mainColor;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .main-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ @include disFlex(center, center);
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ background-color: #ccc;
|
|
|
+ color: #fff;
|
|
|
+ &.mian {
|
|
|
+ background-color: $mainColor;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- & .list_img {
|
|
|
- & > img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+ & .list_img {
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- & .uploadImg {
|
|
|
- border: 1px dashed #e5e5e5;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-sizing: border-box;
|
|
|
+ & .uploadImg {
|
|
|
+ border: 1px dashed #e5e5e5;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .upload_ipt {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- /*overflow:hidden;*/
|
|
|
- cursor: pointer;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ .upload_ipt {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /*overflow:hidden;*/
|
|
|
+ cursor: pointer;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
|
|
|
- .iconfont {
|
|
|
- color: rgb(150, 151, 153);
|
|
|
- font-size: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .iconfont {
|
|
|
+ color: rgb(150, 151, 153);
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
jiangfeng