uniapp實現圖片、視頻上傳
文章目錄
- uniapp實現圖片、視頻上傳
- 效果圖
- 組件
- template
- js
- 使用
相關文檔：
- 結合
uView插件 +uni.uploadFile實現
u-upload
uploadfile
效果圖
組件
- 簡單封裝，還有很多屬性…，自定義樣式等…根據個人所需調整
template
<template><view><u-upload:fileList="fileList"@afterRead="afterRead"@delete="deletePic"name="files":maxCount="maxCount":multiple="multiple":width="width":height="height":previewFullImage="previewFullImage":accept="accept"></u-upload></view>
</template>
js
- toast 方法，修改為自己即可；
<script>export default {name:"uploadFile",props: {width: {type: Number,default: 60},height: {type: Number,default: 60},maxCount: { // 限制上傳數量type: Number,default: 1},multiple: { // 是否開啟圖片多選type: Boolean,default: false},list: { // 圖片列表type: Array,default: []},previewFullImage: { // 文件預覽type: Boolean,default: true},accept: { // 上傳類型 all | media | image | file | videotype: String,default: image}},data() {return {fileList: []};},mounted() {this.fileList = this.list;},methods: {/*** 刪除圖片* @param {Object} event*/deletePic(event) {this.fileList.splice(event.index, 1)},/*** 讀取后的處理函數* @param {Object} event*/async afterRead(event) {let lists = [].concat(event.file)let fileListLen =this.fileList.lengthlists.map((item) => {this.fileList.push({...item,status: 'uploading',message: '上傳中...'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)this.$util.showToast('上傳成功');let item = this.fileList[fileListLen]this.fileList.splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result.imgUrl}))fileListLen++}},/*** 上傳圖片* @param {Object} url*/uploadFilePromise(url) {return new Promise((resolve, reject) => {uni.uploadFile({url: `服務器 url xxxx`,filePath: url,name: 'file', // 文件對應的 keyheader: {// 根據個人所需，是否要登錄// Authorization: `Bearer ${ getToken() }`},success: (res) => {// 接口返回數據，自行修改let datas = JSON.parse(res.data);if (datas.code != 200) {this.$util.showToast(datas.msg);reject(res);return;}setTimeout(() => {resolve(datas.data)}, 1000)},fail: (res) => {reject(res);}});})}}}
</script><style></style>
使用
<view><uploadFile :list="imgList"></uploadFile>
</view>
import uploadFile from '@/components/uploadFile/uploadFile.vue'export default {components: {uploadFile},data() {return {imgList: [{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }] // test 根據業務處理}}}
}
