antd 的upload组件结合oss实现图片上传

多张图片列表上传

1、视图

      <div style="display:flex;" class="clearfix"><span>添加图片：</span><a-uploadlist-type="picture-card":file-list="fileList"@preview="handlePreview"@change="handleChangeImg":before-upload="beforeUpload"><div v-if="fileList.length < 3" style="display:flex"><div class="ant-upload-text" style="width:100px"><a-icon :type="loading ? 'loading' : 'plus'"/><p style="width:100px">上传图片</p></div></div></a-upload></div><a-modal :visible="previewVisible" @cancel="handleCancel"><img style="width: 100%" :src="previewImage"></a-modal>

2、js逻辑

//data定义数据image: [],fileList: [],uploading: false,previewVisible: false,previewImage: '' //预览图片地址
//js引入import uploadOSS from './../tool/alioss'async beforeUpload(file) {const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'if (!isJpgOrPng) {this.$message.error('请上传JPEG/PNG格式!')}const isLt2M = file.size / 1024 / 1024 < 2if (!isLt2M) {this.$message.error('图像必须小于2MB!')}try {let res = await uploadOSS(file).then(result => {this.image.push({ uid: file.uid, name: result.fileName, status: 'done', url: result.fileUrl })this.$message.success('添加图片成功！')},err => {this.$notification.error({message: `添加图片失败`,description: `园区添加图片失败，请稍后再试。错误信息：\n${err.toString()}`})})} catch (e) {console.log(e)}},handleChangeImg({ fileList }) {this.fileList = fileListthis.fileList.forEach(item => {item.status = 'done'})let arr = []for (let i = 0; i < this.fileList.length; i++) {for (let j = 0; j < this.image.length; j++) {if (this.fileList[i].uid == this.image[j].uid) {arr.push(this.image[j])}}}this.image = arr},getBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader()reader.readAsDataURL(file)reader.onload = () => resolve(reader.result)reader.onerror = error => reject(error)})},async handlePreview(file) {if (!file.url && !file.preview) {file.preview = await this.getBase64(file.originFileObj)}this.previewImage = file.url || file.previewthis.previewVisible = true},handleCancel() {this.previewVisible = false},

3、数据交互

//编辑数据回显
this.fileList = JSON.parse(record.image)this.image = this.fileList
//添加数据清空this.fileList = []this.image = []
//后端数据传参params = {name: this.name,desc: this.desc,image: JSON.stringify(this.image)}

4、图片列表样式

.drawer {div {span {display: inline-block;width: 120px;text-align: right;}p {width: 230px;display: inline-block;}/deep/ .ant-upload-list {display: flex;z-index: '999';}.ant-upload-picture-card-wrapper {display: flex;}}
}

使用组件上传图片后，利用oss获取一个图片的线上地址，在把这个图片地址的数组列表存入后端，以便后期回显查看

<template><div class="clearfix"><a-uploadaction="https://www.mocky.io/v2/5cc8019d300000980a055e76"list-type="picture-card":file-list="fileList"@preview="handlePreview"@change="handleChange"><!-- 上传3个 --><div v-if="fileList.length < 3"><a-icon type="plus" /><div class="ant-upload-text">拖拽或上传原图片</div></div></a-upload><a-modal:visible="previewVisible":footer="null"@cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal></div></template><script>export default {data() {return {previewVisible: false, //是否预览previewImage: "", //预览图片地址fileList: [], //上传文件列表};},methods: {//取消预览handleCancel() {this.previewVisible = false;},// 预览async handlePreview(file) {if (!file.url && !file.preview) {file.preview = await this.getBase64(file.originFileObj);}this.previewImage = file.url || file.preview;this.previewVisible = true;},// 上传文件改变handleChange({ fileList }) {this.fileList = fileList;},//base64预览getBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => resolve(reader.result);reader.onerror = (error) => reject(error);});}},};</script>

antd 的upload组件结合oss实现图片上传相关推荐

使用阿里云OSS实现图片上传案例
文章目录前言一.OSS是什么? 二.使用步骤 1.开通OSS服务 2.创建bucket 3.创建子账户 4.查看帮助文档,编写后端代码 5.layui前端总结前言在正式的开发环境中,类似图片 ...
element-ui upload 组件附带额外参数进行上传（一个或多个参数）
element-ui upload 组件附带额外参数进行上传(一个或多个参数),实参.形参均可以传. 正常情况: 附带额外参数进行上传(一个或多个参数)时-------使用箭头函数: HTML部分: ...
Typora + Picgo + 阿里云oss实现图片上传
Typora + Picgo + 阿里云oss实现图片上传设置原因 Typora是一款markdown文本编辑器,无法承载本地图片存储的功能,书写好的文章上传到博客或其他设备上时会导致图片丢失,无法 ...
AjaxFileUpload组件结合Struts2异步图片上传
使用AjaxFileUpload组件结合Struts2异步上传需要添加如下文件: ajaxfileupload.js jquery-x.x.x-min.js struts2相关jar包 AjaxFil ...
django 类取消csrf_Django之Form组件详解、图片上传及定制
Django的Form功能生成HTML标签验证用户数据(显示错误信息) HTML Form提交保留上次提交数据初始化页面显示内容 Django form 流程 1.创建类,继承form.Form ...
Typora+PicGo+阿里云OSS实现图片上传功能
烦恼 Typora是最好用的markdown语法的工具之一:平时做笔记都是使用这个工具,免费,简洁好用,用上之后就爱上了.但是它默认图片是放在本地的.为了用好这个工具,也是经历了一打怪之旅. 开始不做 ...
vant 组件库中的图片上传组件（多张图片上传，删除图片传自定义参数）
html部分 js部分图片上传前,限制图片格式.图片上传后,上传七牛云接口返回图片url,赋值给图片路径变量. 图片删除坑:vant上传组建中内置的删除事件,默认携带两个参数,file和detai ...
antd 中 Upload 上传图片宽高限制以及上传文件的格式限制
一.上传图片的宽高限制在组件Upload中有一个beforeUpload的API,是文件上传之前的钩子函数,我们需要在这个API中做限制 beforeUpload: file => {this ...
SpringMvc+饿了么UI组件+七牛云做图片上传
前言我之前也有用过SpringBoot+OSS做过云存储,可以去看我的文章https://blog.csdn.net/Curtisjia/article/details/109339980,当时我做 ...

antd 的upload组件结合oss实现图片上传

antd 的upload组件结合oss实现图片上传相关推荐

最新文章

热门文章