Vue组件封装上传图片和视频的示例代码 Vue组件封装上传图片和视频的

文章图片

首先下载依赖：

cnpm i -S vue-uuid ali-oss

图片和视频字段都是数组类型，保证可以上传多个文件。
UploadImageVideo：

.UploadImageVideo {/*去除upload组件过渡效果*/::v-deep .el-upload-list__item {transition: none !important; }}

使用：

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字符串。可支持中文文件名

调用组件中的方法：例如可通过 let urls = await this.$refs["ref_UploadImageVideo"].addFiles(); 调用批量上传图片或视频的方法

【Vue组件封装上传图片和视频的示例代码】例1：

文章图片

.userManage {}

文章图片

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 function getUserList() {return request({url: '/api/userManage',method: 'get'})} //新增用户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 = https://www.it610.com/article/await User.find({})ctx.body = {code: 200,message:"请求成功",data,}})//新增用户router.post('/', async (ctx, next) => {let { username, password, imgurl } = ctx.request.body; await User.create({ username, password, imgurl })ctx.body = { code: 200, message: "新增成功" }})//编辑用户router.put('/:_id', async (ctx, next) => {let { username, password, imgurl } = ctx.request.body; let { _id } = ctx.params await User.findByIdAndUpdate(_id, { username, password, imgurl })ctx.body = { code: 200, message: "编辑成功" }})//删除用户router.delete('/:_id', async (ctx, next) => {let { _id } = ctx.params; let { imgurl } = await User.findByIdAndDelete(_id)ctx.body = { code: 200, message: "删除成功", imgurl } }) //根据关键字查询用户。模糊查询 router.get('/search', async (ctx, next) => {let { searchName } = ctx.request.query; let data = https://www.it610.com/article/await User.find({ username: { $regex: searchName } })ctx.body = { code: 200, message:"查询成功", data }})module.exports = router

到此这篇关于Vue封装上传图片和视频的组件的文章就介绍到这了,更多相关vue组件封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！