|
@@ -1,189 +1,235 @@
|
|
|
<template>
|
|
|
- <view class="file-upload-container">
|
|
|
- <view class="file-upload-view" v-for="(item,index) in files" :key="index">
|
|
|
- <view class="file-upload-ckick" @click="imgView(index)">
|
|
|
- <image v-if="item.url" mode="aspectFit" :src="imageUrl + item.url" style="width:100%;height:100%">
|
|
|
- </image>
|
|
|
- <template v-else>
|
|
|
- <image mode="aspectFit" :src="item.loUrl" style="width:100%;height:100%">
|
|
|
- </image>
|
|
|
- <view class="mack" @tap.stop="()=>{}"></view>
|
|
|
- <image @tap.stop="()=>{}" class="uploadImg" mode="aspectFit"
|
|
|
- src="/static/upload/loading.png">
|
|
|
- </image>
|
|
|
- </template>
|
|
|
- <image class="delImg" mode="aspectFit" src="/static/upload/del.png" @tap.stop="del(index)">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="count===0?true:count-files.length" class="file-upload-view" @click="upload">
|
|
|
- <view class="file-upload-ckick">
|
|
|
- <image class="uploadImg" mode="aspectFit" src="/static/upload/upload.png">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="file-upload-container">
|
|
|
+ <view class="file-upload-view" v-for="(item, index) in files" :key="index">
|
|
|
+ <view class="file-upload-ckick" @click="imgView(index)">
|
|
|
+ <image v-if="item.url" mode="aspectFit" :src="imageUrl + item.url" style="width: 100%; height: 100%"> </image>
|
|
|
+ <template v-else>
|
|
|
+ <image mode="aspectFit" :src="item.loUrl" style="width: 100%; height: 100%"> </image>
|
|
|
+ <view class="mack" @tap.stop="() => {}"></view>
|
|
|
+ <image @tap.stop="() => {}" class="uploadImg" mode="aspectFit" src="/static/upload/loading.png"> </image>
|
|
|
+ </template>
|
|
|
+ <image class="delImg" mode="aspectFit" src="/static/upload/del.png" @tap.stop="del(index)"> </image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="count === 0 ? true : count - files.length" class="file-upload-view" @click="upload">
|
|
|
+ <view class="file-upload-ckick">
|
|
|
+ <image class="uploadImg" mode="aspectFit" src="/static/upload/upload.png"> </image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- uploadImg
|
|
|
- } from "@/common/utils/util.js"
|
|
|
- import {
|
|
|
- b64_md5
|
|
|
- } from "@/common/utils/md5.js"
|
|
|
- import loadingImg from "./loading.png"
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- count: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- },
|
|
|
- fileList: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- imageUrl: this.$imageUrl,
|
|
|
- files: this.setFileVal(this.fileList)
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- fileList() {
|
|
|
- this.files = this.setFileVal(this.fileList)
|
|
|
- },
|
|
|
- files: {
|
|
|
- handler(newName, oldName) {
|
|
|
- if (newName.every(item => item.url ? true : false)) {
|
|
|
- this.$emit("getFiles", newName.map(item => item.url))
|
|
|
- }
|
|
|
- },
|
|
|
- deep: true
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- setFileVal(arr) {
|
|
|
- return arr.map(item => {
|
|
|
- if (typeof(item) == 'string') {
|
|
|
- return {
|
|
|
- url: item,
|
|
|
- key: b64_md5(item)
|
|
|
- }
|
|
|
- } else {
|
|
|
- return item
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- upload() {
|
|
|
- uni.chooseImage({
|
|
|
- count: this.count === 0 ? 0 : this.count - this.files.length,
|
|
|
- success: async res => {
|
|
|
- const leng = res.tempFiles.length;
|
|
|
- for (var file of res.tempFiles) {
|
|
|
- this.files.push({
|
|
|
- url: false,
|
|
|
- key: b64_md5(file.path),
|
|
|
- loUrl: file.path
|
|
|
- })
|
|
|
- }
|
|
|
- for (var i = 0; i < leng; i++) {
|
|
|
- var data = await uploadImg(res.tempFiles[i])
|
|
|
- var obj = this.files.find(item => item.key === b64_md5(res.tempFiles[i]
|
|
|
- .path))
|
|
|
- if (obj) {
|
|
|
- obj.url = data.url
|
|
|
- obj.key = b64_md5(data.url)
|
|
|
- delete obj.loUrl
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- del(index) {
|
|
|
- this.files.splice(index, 1)
|
|
|
- },
|
|
|
- imgView(index) {
|
|
|
- var list = this.files.map(item => {
|
|
|
- if (item.url) {
|
|
|
- return this.imageUrl + item.url
|
|
|
- } else {
|
|
|
- return loadingImg
|
|
|
- }
|
|
|
- })
|
|
|
- uni.previewImage({
|
|
|
- current: index,
|
|
|
- urls: list
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+// import { upload } from "@/common/http/upload-file.js";
|
|
|
+import api from '@/common/http/'
|
|
|
+import { uploadImgs } from '@/common/utils/util.js'
|
|
|
+import { b64_md5 } from '@/common/utils/md5.js'
|
|
|
+import loadingImg from './loading.png'
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ count: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ fileList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageUrl: this.$imageUrl,
|
|
|
+ files: this.setFileVal(this.fileList)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ fileList() {
|
|
|
+ this.files = this.setFileVal(this.fileList)
|
|
|
+ },
|
|
|
+ files: {
|
|
|
+ handler(newName, oldName) {
|
|
|
+ if (newName.every(item => (item.url ? true : false))) {
|
|
|
+ this.$emit(
|
|
|
+ 'getFiles',
|
|
|
+ newName.map(item => item.url)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ setFileVal(arr) {
|
|
|
+ return arr.map(item => {
|
|
|
+ if (typeof item == 'string') {
|
|
|
+ return {
|
|
|
+ url: item,
|
|
|
+ key: b64_md5(item)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ upload() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: this.count === 0 ? 0 : this.count - this.files.length,
|
|
|
+ success: async res => {
|
|
|
+ // #ifdef H5
|
|
|
+ uploadImgs(res.tempFiles[0]).then(res=>{
|
|
|
+ console.log(res);
|
|
|
+ })
|
|
|
+ //获取阿里oss上传参数
|
|
|
+ // const par = await api.get('/common/oss/config').then(res => {
|
|
|
+ // return res.data
|
|
|
+ // })
|
|
|
+
|
|
|
+ // console.log(res)
|
|
|
+
|
|
|
+ // const blob = new Blob(res.tempFilePaths, { type: 'text/plain' })
|
|
|
+ // console.log(par, blob)
|
|
|
+ // const formData = new FormData()
|
|
|
+ // formData.append('file', blob, 'dsff')
|
|
|
+
|
|
|
+ // // 配置axios请求参数
|
|
|
+ // const config = {
|
|
|
+ // method: 'post',
|
|
|
+ // url: par.host, // 根据你的存储桶所在地区修改域名
|
|
|
+ // headers: {
|
|
|
+ // 'Content-Type': 'multipart/form-data'
|
|
|
+ // },
|
|
|
+ // data: formData
|
|
|
+ // }
|
|
|
+
|
|
|
+ // upload()
|
|
|
+
|
|
|
+ // 发送上传请求
|
|
|
+ // try {
|
|
|
+ // const response = await api('',config)
|
|
|
+ // if (response.status === 200) {
|
|
|
+ // console.log('上传成功')
|
|
|
+ // } else {
|
|
|
+ // console.log('上传失败', response)
|
|
|
+ // }
|
|
|
+ // } catch (error) {
|
|
|
+ // console.log('上传发生错误', error)
|
|
|
+ // }
|
|
|
+
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ const leng = res.tempFiles.length
|
|
|
+ console.log(res)
|
|
|
+
|
|
|
+ return
|
|
|
+
|
|
|
+ for (var file of res.tempFiles) {
|
|
|
+ this.files.push({
|
|
|
+ url: false,
|
|
|
+ key: b64_md5(file.path),
|
|
|
+ loUrl: file.path
|
|
|
+ })
|
|
|
+ }
|
|
|
+ for (var i = 0; i < leng; i++) {
|
|
|
+ var data = await uploadImg(res.tempFiles[i])
|
|
|
+ console.log(data, this.files, b64_md5(res.tempFiles[i].path), 99)
|
|
|
+ var obj = this.files.find(item => item.key === b64_md5(res.tempFiles[i].path))
|
|
|
+ if (obj) {
|
|
|
+ obj.url = data.data.url
|
|
|
+ obj.key = b64_md5(data.data.url || '')
|
|
|
+ delete obj.loUrl
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ del(index) {
|
|
|
+ this.files.splice(index, 1)
|
|
|
+ },
|
|
|
+ imgView(index) {
|
|
|
+ var list = this.files.map(item => {
|
|
|
+ if (item.url) {
|
|
|
+ return this.imageUrl + item.url
|
|
|
+ } else {
|
|
|
+ return loadingImg
|
|
|
+ }
|
|
|
+ })
|
|
|
+ uni.previewImage({
|
|
|
+ current: index,
|
|
|
+ urls: list
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .file-upload-container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .file-upload-view {
|
|
|
- display: inline-block;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- &:nth-last-of-type(-n+2) {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .file-upload-ckick {
|
|
|
- width: 300rpx;
|
|
|
- height: 190rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 20rpx;
|
|
|
- opacity: 1;
|
|
|
- border: 1rpx solid #E4E4E4;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10rpx;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .mack {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- z-index: 2;
|
|
|
- background: rgba(0, 0, 0, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .uploadImg {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
-
|
|
|
- .delImg {
|
|
|
- position: absolute;
|
|
|
- top: -16rpx;
|
|
|
- right: -16rpx;
|
|
|
- z-index: 2;
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.file-upload-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .file-upload-view {
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ &:nth-last-of-type(-n + 2) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-upload-ckick {
|
|
|
+ width: 300rpx;
|
|
|
+ height: 190rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1rpx solid #e4e4e4;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10rpx;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .mack {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 2;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadImg {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delImg {
|
|
|
+ position: absolute;
|
|
|
+ top: -16rpx;
|
|
|
+ right: -16rpx;
|
|
|
+ z-index: 2;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|