|
|
@@ -3,65 +3,75 @@
|
|
|
<div class="">
|
|
|
<div class="upImg">
|
|
|
<div class="upImg-item" v-if="!imgData">
|
|
|
- <input class="upImg-item-input" type="file" placeholder="选择图片" @change="changesFun" />
|
|
|
+ <input class="upImg-item-input" type="file" :disabled="props.disabled" placeholder="选择图片" @change="changesFun" />
|
|
|
<div class="upImg-item-icon"><el-icon>
|
|
|
<Plus />
|
|
|
</el-icon></div>
|
|
|
</div>
|
|
|
- <div class="upImg-img" v-else @mouseenter="showModel=true" @mouseleave="showModel=false">
|
|
|
+ <div class="upImg-img" v-else @mouseenter="showModel = true" @mouseleave="showModel = false">
|
|
|
<img :src="imgData" style="width: 100%;height: 100%;object-fit: cover;">
|
|
|
- <div class="upImg-img-model" v-show='showModel'>
|
|
|
- <div @click="clickDel" style="color: #fff;">删除</div>
|
|
|
+ <div class="upImg-img-model" v-if='showModel'>
|
|
|
+ <el-icon @click="clickShow" style="color: #fff;cursor: pointer;font-size: 18px;margin-right: 5px;"><View /></el-icon>
|
|
|
+ <el-icon @click="clickDel" v-if="!props.disabled" style="color: #fff;cursor: pointer;font-size: 16px;"><Delete /></el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-dialog v-model="dialogVisible" style="z-index: 10;" :append-to-body="true">
|
|
|
+ <img w-full :src="imgData" style="width: 100%;height: auto;"/>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { defineEmits ,ref} from 'vue';
|
|
|
+import {ref } from 'vue';
|
|
|
import { UpFileToken } from '@/api/public/index'
|
|
|
import { GlobalStore } from '@/stores/index'
|
|
|
import { resolve } from 'path';
|
|
|
-import qiniu from "qiniu-js";
|
|
|
-import { ElMessage} from 'element-plus'
|
|
|
+import * as qiniu from "qiniu-js";
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+
|
|
|
|
|
|
const props = defineProps({
|
|
|
imgData: {
|
|
|
type: String,
|
|
|
default: () => '',
|
|
|
},
|
|
|
+ disabled:{
|
|
|
+ type: Boolean,
|
|
|
+ default: () => false,
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
const uploadData = {
|
|
|
- token: '',
|
|
|
- key: ''
|
|
|
+ token: '',
|
|
|
+ key: ''
|
|
|
}
|
|
|
const globalStore = GlobalStore()
|
|
|
const showModel = ref(false)
|
|
|
const emits = defineEmits()
|
|
|
const files = ref()
|
|
|
-const changesFun = async (e:any) => {
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const changesFun = async (e: any) => {
|
|
|
files.value = e.target.files[0]
|
|
|
await clickToken()//获取token
|
|
|
- uploadData.key = e.target.files[0].name || null
|
|
|
+ uploadData.key = e.target.files[0].name || null
|
|
|
QiniuYun()
|
|
|
- console.log('选择',e,uploadData)
|
|
|
+ console.log('选择', e, uploadData)
|
|
|
}
|
|
|
|
|
|
//获取token Api
|
|
|
const clickToken = async () => {
|
|
|
- return new Promise((resolve:any)=>{
|
|
|
+ return new Promise((resolve: any) => {
|
|
|
UpFileToken({ User_tokey: globalStore.GET_User_tokey }).then(res => {
|
|
|
uploadData.token = res.Data as string
|
|
|
resolve()
|
|
|
})
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
//函数
|
|
|
-const QiniuYun = async ()=>{
|
|
|
+const QiniuYun = async () => {
|
|
|
var config = {
|
|
|
useCdnDomain: false, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
|
|
|
region: qiniu.region.z2,
|
|
|
@@ -69,44 +79,47 @@ const QiniuYun = async ()=>{
|
|
|
chunkSize: 1000, //每个分片的大小，单位mb，默认值3
|
|
|
forceDirect: false //直传还是断点续传方式，true为直传
|
|
|
};
|
|
|
- var putExtra = {
|
|
|
+ var putExtra: any = {
|
|
|
fname: files.value.name, //文件原始文件名
|
|
|
params: {},
|
|
|
mimeType: [] || null
|
|
|
};
|
|
|
- var observable = qiniu.upload(files.value, {...uploadData});
|
|
|
+ var observable = qiniu.upload(files.value, uploadData.key, uploadData.token, putExtra, config);
|
|
|
// 设置实例的监听对象
|
|
|
var observer = {
|
|
|
- next(res:any) {
|
|
|
- console.log('实例监听对象', res)
|
|
|
- },
|
|
|
- // 接收上传错误信息
|
|
|
- error(err:any) {
|
|
|
- switch (err.code) {
|
|
|
- case 413:
|
|
|
- ElMessage.error('错了哦，图片可能太大了哦')
|
|
|
- break
|
|
|
- case 408:
|
|
|
- ElMessage.error('错了哦，请求超时')
|
|
|
- break
|
|
|
- default:
|
|
|
- ElMessage.error('错了哦，上传错误')
|
|
|
+ next(res: any) {
|
|
|
+ console.log('实例监听对象', res)
|
|
|
+ },
|
|
|
+ // 接收上传错误信息
|
|
|
+ error(err: any) {
|
|
|
+ switch (err.code) {
|
|
|
+ case 413:
|
|
|
+ ElMessage.error('错了哦，图片可能太大了哦')
|
|
|
+ break
|
|
|
+ case 408:
|
|
|
+ ElMessage.error('错了哦，请求超时')
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ ElMessage.error('错了哦，上传错误')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 接收上传完成后的信息
|
|
|
+ complete(com: any) {
|
|
|
+ let ERPOSS = import.meta.env.VITE_BZD_ERPOSS_APP_API
|
|
|
+ emits('update:upImg',ERPOSS+com.key);
|
|
|
}
|
|
|
- },
|
|
|
- // 接收上传完成后的信息
|
|
|
- complete(com:any) {
|
|
|
- console.log('七牛云返回',com)
|
|
|
- }
|
|
|
-};
|
|
|
-observable.subscribe(observer);
|
|
|
+ };
|
|
|
+ observable.subscribe(observer);
|
|
|
}
|
|
|
|
|
|
//删除
|
|
|
-const clickDel = async (e:any)=>{
|
|
|
- console.log('删除',e)
|
|
|
- emits('update:upImg','');
|
|
|
+const clickDel = async (e: any) => {
|
|
|
+ emits('update:upImg', '');
|
|
|
+}
|
|
|
+//函数
|
|
|
+const clickShow = async ()=>{
|
|
|
+ dialogVisible.value = true
|
|
|
}
|
|
|
-
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
/* @import url(); 引入css类 */
|
|
|
@@ -164,7 +177,11 @@ const clickDel = async (e:any)=>{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(#000, 0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-}</style>
|
|
|
+}
|
|
|
+</style>
|
YangJian0701