vue3 + ts + element-plus（el-upload + vuedraggable实现上传OSS并排序） ...

这里创建项目就不多说了
安装element-plus

1. npm install element-plus

复制代码

安装vuedraggable

1. npm install vuedraggable

复制代码

安装ali-oss

1. npm install ali-oss

复制代码

这里是封装一下：在components创建文件夹jc-upload>jc-upload.vue
在封装的过程中碰到了一个问题就是draggable和el-upload上传按钮独占一行，显然不是我们需要的效果，先看问题

百度了一下，没有找到什么办理办法，这里通过一行css办理以上问题，如有大佬有更好的方案可以分享一下

1. .draggable-container {
2.      display: contents;
3. }

复制代码

 完整代码

1. <template>
2.     <div class="upload-container">
3.       <draggable class="draggable-container" v-model="newsFileList" itemKey="url" ghost-class="ghost" animation="300">
4.         <template #item="{ element }">
5.           <ul class="el-upload-list el-upload-list--picture-card">
6.             <li :key="element.url" class="el-upload-list__item is-success animated">
7.               <img class="el-upload-list__item-thumbnail" :src="element.url" alt="">
8.               <label class="el-upload-list__item-status-label">
9.                   <i class="el-icon el-icon--upload-success el-icon--check">
10.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
11.                       <path fill="currentColor"
12.                           d="M406.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">
13.                       </path>
14.                     </svg>
15.                   </i>
16.               </label>
17.               <i class="el-icon-close"></i>
18.               <span class="el-upload-list__item-actions">
19.                   <!-- 预览 -->
20.                   <span class="el-upload-list__item-preview"
21.                       @click="handlePictureCardPreview(element)">
22.                       <i class="el-icon el-icon--zoom-in">
23.                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
24.                           <path fill="currentColor"
25.                               d="m795.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">
26.                           </path>
27.                         </svg>
28.                       </i>
29.                   </span>
30.                   <!-- 删除 -->
31.                   <span class="el-upload-list__item-delete" @click="handleRemove(element)">
32.                       <i class="el-icon el-icon--zoom-in">
33.                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
34.                           <path fill="currentColor"
35.                               d="M160 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">
36.                           </path>
37.                         </svg>
38.                       </i>
39.                   </span>
40.               </span>
41.             </li>
42.           </ul>
43.         </template>
44.       </draggable>
45.       <el-upload
46.         ref="uploadRef"
47.         :show-file-list="false"
48.         :class="newsFileList.length >= limit ? 'upload-hide' : ''"
49.         :action="action"
50.         :accept="accept"
51.         list-type="picture-card"
52.         :file-list="newsFileList"
53.         :on-remove="handleRemove"
54.         :on-success="onSuccess"
55.         :limit="limit"
56.         :disabled="disabled"
57.         with-credentials
58.         :multiple="limit > 1? true : false"
59.         drag>
60.         <el-icon><Plus /></el-icon>
61.       </el-upload>
63.       <el-dialog v-model="dialogVisible">
64.         <img class="uy-w-p-100" w-full :src="dialogImageUrl" alt="Preview Image" />
65.       </el-dialog>
66.     </div>
67. </template>
69. <script lang="ts" setup>
70. import { reactive, ref, watch } from 'vue'
71. import { ElNotification, type UploadFile } from 'element-plus'
72. import OSS from 'ali-oss';
73. import draggable from 'vuedraggable';
75. const $emit = defineEmits(['success'])
77. /**
78. * 组件props
79. */
80. const props = defineProps({
81.   action: {
82.     type: String,
83.     // default: `${import.meta.env.VITE_SERVE}/api/Osstoken/getToken`
84.     default: `/api/api/Osstoken/getToken`
85.   },
86.   fileList: {
87.     type: Array as () => UploadFile[],
88.     default: () => []
89.   },
90.   limit: {
91.     type: Number,
92.     default: 1
93.   },
94.   accept: {
95.     type: String,
96.     default: 'image/*'
97.   },
98.   disabled: {
99.     type: Boolean,
100.     default: false
101.   }
102. })
104. // data数据
105. const uploadRef = ref()
106. const dialogImageUrl = ref('')
107. const dialogVisible = ref(false)
108. const disabled = ref(false)
109. let newsFileList = ref(props.fileList);
111. // methods方法
112. const handleRemove = (file: UploadFile) => {
113.   const index = newsFileList.value.findIndex(item => item.url === file.url);
114.   newsFileList.value.splice(index, 1);
115.   $emit('success', newsFileList)
116. };
118. const handlePictureCardPreview = (file: UploadFile) => {
119.   dialogImageUrl.value = file.url!
120.   dialogVisible.value = true
121. };
123. const uploadAliyun = async (res: any, file: UploadFile, fileList: UploadFile[]) => {
124.   if (res.code === 0) {
125.     let date = new Date();
126.     let year = date.getFullYear();
127.     let month = date.getMonth() + 1;
128.     let day = date.getDate();
129.     let formattedMonth = month.toString().padStart(2, '0');
130.     let formattedDay = day.toString().padStart(2, '0');
131.     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()}`
132.     let client = new OSS({
133.       accessKeyId: res.data.AccessKeyId, //OSS的用户名
134.       accessKeySecret: res.data.AccessKeySecret, //OSS密钥
135.       region: res.data.region, //域名是创建Buckiet，时选择的服务器地址 比如选择 华南3（广州）：oss-cn-guangzhou
136.       bucket: res.data.bucket,  //创建Buckiet的名称
137.       stsToken: res.data.SecurityToken //临时Token
138.     })
139.     const put = async () => {
140.       try {
141.         const result = await client.put(filePath, file.raw!);
142.         if(result.res.status === 200) {
143.           if(props.accept === 'video/*') {
144.             file.url = (result.res as any).requestUrls[0] + '?x-oss-process=video/snapshot,t_0,f_jpg';
145.           }
146.           newsFileList.value.push({
147.             url: (result.res as any).requestUrls[0],
148.             name: '',
149.             status: 'success',
150.             uid: 0
151.           })
152.           $emit('success', newsFileList)
153.         }
154.       } catch (err) {
155.         ElNotification.success({ message: '上传失败~' });
156.       }
157.     }
158.     put();
159.   } else {
160.     ElNotification.success({ message: res.msg });
161.   }
162. };
164. const onSuccess = (res: any, file: UploadFile, fileList: UploadFile[]) => {
165.   uploadAliyun(res, file, fileList)
166. };
168. watch(() => props.fileList, (newVal) => {
169.   newsFileList.value = newVal
170. }, { deep: true })
172. watch(() => newsFileList.value, (newVal) => {
173.   if(JSON.stringify(newVal) !== JSON.stringify(props.fileList)) {
174.     $emit('success', newVal)
175.   }
176. }, { deep: true })
177. </script>
179. <style lang="scss" scoped>
180. :deep(.el-upload-dragger) {
181.   padding: 56px 0;
182.   background-color: transparent;
183.   border: none;
184. }
186. .upload-hide {
187.     position: relative;
189.     :deep(.el-upload--picture-card) {
190.         display: none;
191.     }
192. }
194. .upload-container {
195.   display: flex;
196.   flex-wrap: wrap;
198.   .draggable-container {
199.     display: contents;
200.   }
201. }
202. </style>

复制代码

对以上代码解释一下
重点办理el-upload上传按钮独占一行问题

1. .upload-container {
2.   display: flex;
3.   flex-wrap: wrap;
5.   .draggable-container {
6.     display: contents;
7.   }
8. }

复制代码

主要对limit最大限制对上传按钮隐藏 

1. .upload-hide {
2.     position: relative;
4.     :deep(.el-upload--picture-card) {
5.         display: none;
6.     }
7. }

复制代码

action主要获取OSS上传凭证这里用了代理，通过前端请求后端接口会拒绝访问，线上不需要代理
这段代码主要为了更新排序后的数组

1. watch(() => newsFileList.value, (newVal) => {
2.   if(JSON.stringify(newVal) !== JSON.stringify(props.fileList)) {
3.     $emit('success', newVal)
4.   }
5. }, { deep: true })

复制代码

这里为什么选用ref并不是为了省事ref一把梭，刚开始我用的 reactive但是在排序的时候一直回弹，详细缘故原由没有深究，换成ref就没问题了

1. let newsFileList = ref(props.fileList);

复制代码

就解释这么多吧，有什么疑问或不明白的地方可以留言，有什么更好的方案请大佬们见教，写的不好请多多担待

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。