160 lines
3.2 KiB
Vue
160 lines
3.2 KiB
Vue
<template>
|
|
<view class="imgUpload">
|
|
<uni-file-picker
|
|
v-model="fileList"
|
|
:limit='limit'
|
|
:countLength='1'
|
|
:auto-upload="false"
|
|
fileMediatype="image"
|
|
@select="select"
|
|
@delete="deleteFn"
|
|
mode="grid"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/*
|
|
* imgUpload 上传
|
|
*/
|
|
import { uploadImage } from '../api/upload.js'
|
|
import { getToken } from '@/utils/auth'
|
|
// import store from '@/store/index.js'
|
|
// let { state:{ login } } = store
|
|
let intervalTime = null
|
|
const app = getApp()
|
|
export default {
|
|
name:"imgUpload",
|
|
data(){
|
|
return {
|
|
fileList:[]
|
|
}
|
|
},
|
|
props:{
|
|
value:{
|
|
type:Array,
|
|
default:() => []
|
|
},
|
|
disabled:{
|
|
type:Boolean,
|
|
default:() => false
|
|
},
|
|
limit:{
|
|
type:Number,
|
|
default:1
|
|
}
|
|
},
|
|
watch:{
|
|
value:{
|
|
immediate:true,
|
|
handler(val){
|
|
if(val.length){
|
|
this.initData()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// created(){
|
|
// // this.initData()
|
|
// },
|
|
methods:{
|
|
// 初始化数据
|
|
initData(){
|
|
intervalTime = setInterval(() => {
|
|
if(this.fileList.length != 0){
|
|
clearInterval(intervalTime)
|
|
return;
|
|
}
|
|
let arr = [...this.value]
|
|
// TODO
|
|
if(arr.length != 0){
|
|
let imgTitem = arr.map(img => {
|
|
return {
|
|
"name":img,
|
|
"extname":'image',
|
|
"url":this.imgFilter(img),
|
|
"currentUrl":img,
|
|
}
|
|
})
|
|
this.fileList = [...this.fileList,...imgTitem]
|
|
}
|
|
},500)
|
|
},
|
|
// 过滤图片
|
|
imgFilter(url){
|
|
// console.log(url,"url")
|
|
let str = url.split('/slm')[1]
|
|
let currentUrl = app.globalData.requestUrl + str
|
|
return currentUrl
|
|
},
|
|
// 文件上传
|
|
select(e){
|
|
// loading
|
|
uni.showLoading({
|
|
title: '上传中'
|
|
});
|
|
let { tempFilePaths } = e
|
|
// console.log(tempFilePaths[0])
|
|
uni.uploadFile({
|
|
url:getApp().globalData.requestUrl + uploadImage,
|
|
filePath: tempFilePaths[0],
|
|
header:{
|
|
Authorization:getToken() || '',
|
|
},
|
|
name: 'file',
|
|
// TODO
|
|
success:(res) => {
|
|
let { data } = res
|
|
uni.showToast({
|
|
title:this.$t('requst.succes'),
|
|
icon:'none',
|
|
duration:1000
|
|
})
|
|
let imgpath = JSON.parse(data).data
|
|
let obj = {
|
|
"name":imgpath,
|
|
"extname":'image',
|
|
"url":this.imgFilter(imgpath),
|
|
"currentUrl":imgpath,
|
|
}
|
|
|
|
this.fileList = [...this.fileList,obj]
|
|
// let valueArr = [...this.value,imgpath]
|
|
this.$emit('update:value',this.fileList);
|
|
uni.hideLoading();
|
|
},
|
|
fail:(err) => {
|
|
uni.showToast({
|
|
title:this.$t('requst.fail'),
|
|
icon:'none',
|
|
duration:1000
|
|
})
|
|
this.fileList.pop()
|
|
this.$emit('update:value',this.fileList)
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
},
|
|
// 文件删除
|
|
deleteFn(e){
|
|
let { tempFilePath,tempFile:{ currentUrl } } = e
|
|
let imgArr = [...this.value]
|
|
this.fileList = this.fileList.filter(item => {
|
|
return item.url != tempFilePath
|
|
})
|
|
imgArr = imgArr.filter(item => {
|
|
return currentUrl.indexOf(item) == -1
|
|
})
|
|
this.$emit('update:value',imgArr)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dataCharts{
|
|
width: 100%;
|
|
height:100%;
|
|
}
|
|
</style>
|