79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<template>
|
|
<view class="pic">
|
|
<view class="uploader__preview" v-for="(item,index) in imgUrls" @click.stop="previewImage(imgUrls,index)"
|
|
:key="index">
|
|
<image :src="item" style="width: 160upx;height: 160upx;" alt="" />
|
|
<view class="van-uploader__preview-delete" @click.stop="delImages(item)">
|
|
<i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
|
|
</view>
|
|
</view>
|
|
<view v-if="imgUrls.length < maxLength" class="imgItem" @click="chooseImg">
|
|
<i class="van-icon van-icon-photograph van-uploader__upload-icon"></i>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
chooseImg,
|
|
devEnv
|
|
} from '@/common/util.js'
|
|
export default {
|
|
name: "upLoadImg",
|
|
props: {
|
|
maxLength: ''
|
|
},
|
|
data() {
|
|
return {
|
|
imgUrls: []
|
|
};
|
|
},
|
|
methods: {
|
|
previewImage(imgUrls, index) {
|
|
uni.previewImage({
|
|
urls: imgUrls, // 要放大的图片的路径，可以是一个数组，支持多张图片
|
|
current: index, // 当前要显示的图片的路径
|
|
success: (res) => {
|
|
// console.log('预览图片成功');
|
|
},
|
|
fail: (err) => {
|
|
// console.error('预览图片失败', err);
|
|
}
|
|
});
|
|
},
|
|
delImages(v) {
|
|
// console.log('图片返回')
|
|
let i = this.imgUrls.findIndex(item => item == v)
|
|
this.imgUrls.splice(i, 1)
|
|
this.$emit('imgParams', this.imgUrls)
|
|
},
|
|
chooseImg() {
|
|
chooseImg().then(res => {
|
|
console.log('图片返回', res)
|
|
let imgUrl = res
|
|
if (!devEnv) {
|
|
imgUrl = this.replaceImgUrl(imgUrl)
|
|
}
|
|
this.imgUrls.push(imgUrl)
|
|
this.$emit('imgParams', this.imgUrls)
|
|
})
|
|
},
|
|
replaceImgUrl(url) {
|
|
const originalUrl = url.replace('admin-api/system/file/0/get', 'appImageDir');
|
|
const newIpAddress = '127.0.0.1';
|
|
const newPort = uni.getStorageSync("ZHHQ_HLJ_PORT");
|
|
// const newIpAddress = '220.248.250.227';
|
|
// const newPort = '49967';
|
|
const replacedUrl = originalUrl.replace(/\/\/([\d]+\.[\d]+\.[\d]+\.[\d]+):(\d+)/,
|
|
`//${newIpAddress}:${newPort}`);
|
|
return replacedUrl
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pic {
|
|
display: flex;
|
|
}
|
|
</style> |