最有效的网站推广方法,网站建设浙江公司,友情链接怎么做,如何提高网站的访问速度这里创建项目就不多说了
安装element-plus
npm install element-plus
安装vuedraggable
npm install vuedraggable
安装ali-oss
npm install ali-oss
这里是封装一下#xff1a;在components创建文件夹jc-uploadjc-upload.vue
在封装的过程中遇到了一个问题就是dr…这里创建项目就不多说了
安装element-plus
npm install element-plus
安装vuedraggable
npm install vuedraggable
安装ali-oss
npm install ali-oss
这里是封装一下在components创建文件夹jc-uploadjc-upload.vue
在封装的过程中遇到了一个问题就是draggable和el-upload上传按钮独占一行显然不是我们需要的效果先看问题 百度了一下没有找到什么解决办法这里通过一行css解决以上问题如有大佬有更好的方案可以分享一下
.draggable-container {display: contents;} 完整代码
templatediv classupload-containerdraggable classdraggable-container v-modelnewsFileList itemKeyurl ghost-classghost animation300template #item{ element }ul classel-upload-list el-upload-list--picture-cardli :keyelement.url classel-upload-list__item is-success animatedimg classel-upload-list__item-thumbnail :srcelement.url altlabel classel-upload-list__item-status-labeli classel-icon el-icon--upload-success el-icon--checksvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 1024 1024path fillcurrentColordM406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z/path/svg/i/labeli classel-icon-close/ispan classel-upload-list__item-actions!-- 预览 --span classel-upload-list__item-previewclickhandlePictureCardPreview(element)i classel-icon el-icon--zoom-insvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 1024 1024path fillcurrentColordm795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z/path/svg/i/span!-- 删除 --span classel-upload-list__item-delete clickhandleRemove(element)i classel-icon el-icon--zoom-insvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 1024 1024path fillcurrentColordM160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z/path/svg/i/span/span/li/ul/template/draggableel-upload refuploadRef :show-file-listfalse :classnewsFileList.length limit ? upload-hide : :actionaction :acceptaccept list-typepicture-card :file-listnewsFileList :on-removehandleRemove :on-successonSuccess :limitlimit:disableddisabledwith-credentials :multiplelimit 1? true : falsedragel-iconPlus //el-icon/el-uploadel-dialog v-modeldialogVisibleimg classuy-w-p-100 w-full :srcdialogImageUrl altPreview Image //el-dialog/div
/templatescript langts setup
import { reactive, ref, watch } from vue
import { ElNotification, type UploadFile } from element-plus
import OSS from ali-oss;
import draggable from vuedraggable;const $emit defineEmits([success])/*** 组件props*/
const props defineProps({action: {type: String,// default: ${import.meta.env.VITE_SERVE}/api/Osstoken/getTokendefault: /api/api/Osstoken/getToken},fileList: {type: Array as () UploadFile[],default: () []},limit: {type: Number,default: 1},accept: {type: String,default: image/*},disabled: {type: Boolean,default: false}
})// data数据
const uploadRef ref()
const dialogImageUrl ref()
const dialogVisible ref(false)
const disabled ref(false)
let newsFileList ref(props.fileList);// methods方法
const handleRemove (file: UploadFile) {const index newsFileList.value.findIndex(item item.url file.url);newsFileList.value.splice(index, 1);$emit(success, newsFileList)
};const handlePictureCardPreview (file: UploadFile) {dialogImageUrl.value file.url!dialogVisible.value true
};const uploadAliyun async (res: any, file: UploadFile, fileList: UploadFile[]) {if (res.code 0) {let date new Date();let year date.getFullYear();let month date.getMonth() 1;let day date.getDate();let formattedMonth month.toString().padStart(2, 0);let formattedDay day.toString().padStart(2, 0);const filePath /uploads/${year}/${formattedMonth}/${formattedDay}/${Date.parse(date.toString()) parseInt((Math.random() * (100000 - 10000 1) 10000).toString(), 10).toString()}.${file.raw?.name.split(.).pop()}let client new OSS({accessKeyId: res.data.AccessKeyId, //OSS的用户名accessKeySecret: res.data.AccessKeySecret, //OSS密钥region: res.data.region, //域名是创建Buckiet时选择的服务器地址 比如选择 华南3广州oss-cn-guangzhoubucket: res.data.bucket, //创建Buckiet的名称stsToken: res.data.SecurityToken //临时Token})const put async () {try {const result await client.put(filePath, file.raw!);if(result.res.status 200) {if(props.accept video/*) {file.url (result.res as any).requestUrls[0] ?x-oss-processvideo/snapshot,t_0,f_jpg;}newsFileList.value.push({url: (result.res as any).requestUrls[0],name: ,status: success,uid: 0})$emit(success, newsFileList)}} catch (err) {ElNotification.success({ message: 上传失败~ });}}put();} else {ElNotification.success({ message: res.msg });}
};const onSuccess (res: any, file: UploadFile, fileList: UploadFile[]) {uploadAliyun(res, file, fileList)
};watch(() props.fileList, (newVal) {newsFileList.value newVal
}, { deep: true })watch(() newsFileList.value, (newVal) {if(JSON.stringify(newVal) ! JSON.stringify(props.fileList)) {$emit(success, newVal)}
}, { deep: true })
/scriptstyle langscss scoped
:deep(.el-upload-dragger) {padding: 56px 0;background-color: transparent;border: none;
}.upload-hide {position: relative;:deep(.el-upload--picture-card) {display: none;}
}.upload-container {display: flex;flex-wrap: wrap;.draggable-container {display: contents;}
}
/style对以上代码解释一下
重点解决el-upload上传按钮独占一行问题
.upload-container {display: flex;flex-wrap: wrap;.draggable-container {display: contents;}
}
主要对limit最大限制对上传按钮隐藏
.upload-hide {position: relative;:deep(.el-upload--picture-card) {display: none;}
}
action主要获取OSS上传凭证这里用了代理通过前端请求后端接口会拒绝访问线上不需要代理
这段代码主要为了更新排序后的数组
watch(() newsFileList.value, (newVal) {if(JSON.stringify(newVal) ! JSON.stringify(props.fileList)) {$emit(success, newVal)}
}, { deep: true })
这里为什么选用ref并不是为了省事ref一把梭刚开始我用的 reactive但是在排序的时候一直回弹具体原因没有深究换成ref就没问题了
let newsFileList ref(props.fileList);
就解释这么多吧有什么疑问或不明白的地方可以留言有什么更好的方案请大佬们赐教写的不好请多多担待
