Vue元件封裝上傳圖片和視訊的示例程式碼
阿新 • • 發佈：2021-08-02
首先下載依賴：
cnpm i -S -uuid ali-oss
圖片和視訊欄位都是陣列型別，保證可以上傳多個檔案。
UploadImageVideo：
<!--UploadImageVideo 分片上傳 -->
<template>gUpLOk
<div class="UploadImageVideo">
<el-upload
action
:on-change="handleChange"
:on-remove="handleRemove"
:limit="limitFileNumber"
:on-exceed="handleExceed"
:file-list="_fileList"
:http-request="handleHttpRequest"
:before-upload="handleBeforeUpload"
:multiple="isMultiple"
>
<el-button slot="trigger" size="small" type="primary">選擇檔案</el-button>
<div slot="tip" clgUpLOk 使用：
<UploadImageVideo ref="ref_UploadImageVideo" bucket="xxx" :currentUrls="formData.imgurl" :limitFileNumber="3" tip="1、最多上傳3張照片; 2、上傳圖片只能是 JPEG/JPG/PNG 格式; 3、單張圖片大小不能超過 5MB!" fileType="image" :isMultiple="true" ></UploadImageVideo>
- fileType可選。預設不寫，表示圖片、視訊都可上傳。fileType="image"表示只能上傳圖片。fileType="video"表示只能上傳視訊
- bucket必選。
- isMultiple可選。預設為false
- currentUrls必選。當前目前已有的檔案伺服器url陣列。通常新增檔案時，傳入的currentUrls為空陣列[]；更新檔案時，傳入到currentUrls為非空陣列
- tip可選。提示內容
提供的方法：（當前元件中所有的上傳都是批量上傳，且為分片上傳，以展示上傳進度條）
- UpdateFiles()。更新檔案資料。上傳新資料到伺服器，並刪除伺服器中的舊資料，返回更新後的url陣列
- addFiles()。批量上傳檔案。返回成功上傳的url陣列
- deleteMultiFiles(urls=[])。批量刪除伺服器中的檔案。引數：待刪除到伺服器檔案url陣列。
- UploadImageVideo(filename,file)。分片上傳資料，可展示進度條。上傳重新命名後的檔案到alioss,並返回單個檔案url字串。可支援中文檔名
呼叫元件中的方法：例如可通過 leturls=awaitthis.$refs["ref_UploadImageVideo"].addFiles();呼叫批量上傳圖片或視訊的方法
例1：
<!--userManage-->
<template>
<div class="userManage">
<el-card>
<div style="margin-bottom: 10px">
<el-input
v-model="searchName"
clearable
placeholder="輸入使用者名稱稱搜尋"
style="width: 200px; margin-right: 10px"
/>
<el-button
sizi="mini"
type="success"
icon="el-icon-search"
@click="searchUser(searchName)"
>搜尋</el-button>
<el-button
sizi="mini"
type="warning"
icon="el-icon-refresh-left"
@click="searchName = ''"
>重置</el-button>
<el-button sizi="mini" @click="handleAdd()" type="primary" icon="el-icon-plus">新增</el-button>
<el-button @click="getUserList()" sizi="mini" icon="el-icon-refresh" style="float: right">重新整理</el-button>
</div>
<el-table :data="tableData" border v-loading="isLoading">
<el-table-column label="使用者名稱" prop="username" align="center" width="150px"></el-table-column>
<el-table-column label="密碼" prop="password" align="center"></el-table-column>
<el-table-column label="圖片" align="center">
<template slot-scope="scope">
<div
style="
display: flex;
justify-content: space-around;
flex-flow: row wrap;
"
>
<el-image
style="width: 50px; height: 50px"
v-for="(item,index) in scope.row.imgurl"
:key="index"
:src="item"
:preview-src-list="scope.row.imgurl"
></el-image>
<!-- <a :href="scope.row.imgurl" rel="external nofollow" target="_blank">{{scope.row.imgurl}}</a> -->
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" @click="showEditDialog(scope.row)">
<i class="el-icon-edit" /> 編輯
</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">
<i class="el-icon-delete" /> 刪除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<UserManageDialog :dialog="dialog" :formData="formData" @addUser="addUser" @editUser="editUser"></UserManageDialog>
</div>
</template>
<script>
import UserManageDialog from "./userManageDialog.vue";
import { client_alioss,deleteMultiFiles } from "@/utils/alioss.";
import {
addUser,getUserList,editUser,deleteUser,searchUser
} from "@/api/userManage/index";
export default {
name: "userManage",components: { UserManageDialog },data() {
return {
searchName: "",isLoading: false,dialog: {
show: false,title: ""
},formData: {},tableData: [
{
_id: "",username: "admin",password: "123",imgurl: []
}
],currentImgs: []
};
},props: {},mounted() {
this.getUserList();
},computed: {},methods: {
//獲取使用者列表
async getUserList() {
this.isLoading = true;
let { data } = await getUserList();
this.tableData = data.data;
this.isLoading = false;
},//開啟新增使用者視窗
handleAdd() {
this.dialog = {
show: true,title: "新增使用者",option: "add"
};
this.formData = {
username: "",password: "",imgurl: []
};
},//開啟編輯使用者視窗
showEditDialog(row) {
this.currentImgs = row.imgurl;
this.dialog = {
show: true,title: "編輯使用者",option: "edit"
};
this.formData = {
_id: row._id,username: row.username,password: row.password,imgurl: row.imgurl
};
},//新增使用者
async addUser(urls) {
this.formData.imgurl = urls;
await addUser(this.formData);
this.dialog.show = false;
this.$notify({
title: "成功",message: "新增使用者成功！",type: "success"
});
this.getUserList();
},//編輯使用者
async editUser(urls) {
this.formData.imgurl = urls;
await editUser(this.formData,this.formData._id); //更新，尤其是圖片url
this.dialog.show = false;
this.$notify({
title: "成功",message: "編輯使用者成功！",//刪除使用者
handleDelete({ _id }) {
this.$confirm("此操作將永久刪除該檔案,是否繼續?","提示",{
confirmButtonText: "確定",cancelButtonText: "取消",type: "warning"
})
.then(async () => {
this.$message({
type: "success",message: "刪除成功!",showClose: true
});
let {
data: { imgurl }
} = await deleteUser(_id);
//刪除伺服器中的檔案。傳入待刪除的url陣列
await deleteMultiFiles(imgurl);
this.getUserList();
})
.catch(() => {
this.$message({
type: "info",message: "已取消刪除",showClose: true
});
});
},//根據使用者名稱查詢
async searchUser(searchName) {
this.isLoading = true;
let { data } = await searchUser({
searchName
});
this.tableData = data.data;
this.isLoading = false;
}
},watch: {}
};
</script>
<style lang="scss" scoped>
.userManage {
}
</style>
<!--userManageDialog -->
<template>
<div class="userManageDialog">
<el-dialog :title="dialog.title" width="45%" :visible.sync="dialog.show" v-if="dialog.show">
<el-form ref="ref_form_userManage" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="使用者名稱" prop="username">
<el-input v-model="formData.username" autocomplete="off" style="width: 90%"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input v-model="formData.password" autocomplete="off" style="width: 90%"></el-input>
</el-form-item>
<el-form-item label="圖片" prop="imgurl">
<!-- fileType屬性不寫的話，表示圖片、視訊都可上傳。fileType="image"表示只能上傳圖片。fileType="video"表示只能上傳視訊 -->
<UploadImageVideo
ref="ref_UploadImageVideo"
bucket="bucket-lijiang-test"
:currentUrls="formData.imgurl"
:limitFileNumber="3"
tip="1、最多上傳3張照片; 2、上傳圖片只能是 JPEG/JPG/PNG 格式; 3、單張圖片大小不能超過 5MB!"
fileType="image"
:isMultiple="true"
></UploadImageVideo>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialog.show = false">取 消</el-button>
<el-button
v-if="dialog.option == 'add'"
@click="addUser('ref_form_userManage')"
type="primary"
>確 定</el-button>
<el-button
v-if="dialog.option == 'edit'"
@click="editUser('ref_form_userManage')"
type="primary"
>確 定</el-button>
</dwww.cppcns.comiv>
</el-dialog>
</div>
</template>
<script>
import UploadImageVideo from "@/components/UploadImageVideo";
export default {
name: "userManageDialog",components: { UploadImageVideo },props: ["dialog","formData"],data() {
return {
fileList: [],rules: {
username: [
{ required: true,message: "請輸入使用者名稱稱",trigger: "blur" }
]
}
};
},methods: {
addUser(formName) {
this.$refs[formName].validate(async valid => {
if (valid) {
let urls = await this.$refs["ref_UploadImageVideo"].addFiles();
this.$emit("addUser",urls);
} else {
console.log("error submit!!");
return false;
}
});
},editUser(formName) {
this.$refs[formName].validate(async valid => {
if (valid) {
let urls = await this.$refs["ref_UploadImageVideo"].UpdateFiles();
this.$emit("editUser",urls);
} else {
console.log("error submit!!");
return false;
}
});
}
},watch: {}
};
</script>
<style lang="scss" scoped>
</style>
import { uuid } from 'vue-uuid';
const OSS = require("ali-oss");
let client = new OSS({
region: "oss-cn-chengdu",accessKeyId: "LTAI5tQPHvixV8aakp1vg8Jr",accessKeySecret: "xYyToToPe8UFQMdt4hpTUS4PNxzl9S",bucket: "bucket-lijiang-test",});
export const client_alioss = client;
//刪除檔案陣列
export async function deleteMultiFiles(urls = []) {
let arr_pathname = [];
if (urls.length !== 0) {
for (const item of urls) {
//不要用let url=require("url");url.parse();已失效。要用new URL()
let { pathname } = new URL(item);
// decodeURIComponent()函式將中文亂碼轉為中文
arr_pathname.push(decodeURIComponent(pathname));
}
await client.deleteMulti(arr_pathname);
}
}
import request from '@/utils/request'
// 獲取使用者列表
export functigUpLOkon getUserList() {
return request({
url: '/api/userManage',method: 'get'
})
www.cppcns.com}
// 新增使用者
export function addUser(data) {
return request({
url: '/api/userManage',method: 'post',data
})
}
// 編輯使用者
export function editUser(data,_id) {
return request({
url: `/api/userManage/${_id}`,method: 'put',data
})
}
// 刪除使用者
export function deleteUser(_id) {
return request({
url: `/api/userManage/${_id}`,method: 'delete'
})
}
// 根據關鍵字查詢
export function searchUser(data) {
return request({
url: `/api/userManage/search`,method: 'get',params: data
})
}
const router = require('koa-router')()
const User = require("../models/User"); //引入模組模型
router.prefix('/userManage')
//獲取使用者列表
router.get('/',async (ctx,next) => {
let data = await User.find({})
ctx.body = {
code: 200,message: "請求成功",data,}
})
//新增使用者
router.post('/',next) => {
let { username,password,imgurl } = ctx.request.body;
await User.create({ username,imgurl })
ctx.body = { code: 200,message: "新增成功" }
})
//編輯使用者
router.put('/:_id',imgurl } = ctx.request.body;
let { _id } = ctx.params
await User.findByIdAndUpdate(_id,{ username,message: "編輯成功" }
})
//刪除使用者
router.delete('/:_id',next) => {
let { _id } = ctx.params;
let { imgurl } = await User.findByIdAndDelete(_id)
ctx.body = { code: 200,message: "刪除成功",imgurl }
})
//根據關鍵字查詢使用者。模糊查詢
router.get('/search',next) => {
let { searchName } = ctx.request.query;
let data = await User.find({ username: { $regex: searchName } })
ctx.body = { code: 200,message: "查詢成功",data }
})
module.exports = router
到此這篇關於Vue封裝上傳圖片和視訊的元件的文章就介紹到這了,更多相關vue元件封裝內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！