vue2.x,element-ui 中上传图片组件(图片查看,已有图片渲染)

发布网友发布时间：2022-11-21 14:48

我来回答

共1个回答

热心网友时间：2024-12-04 18:47

1、基本标签结构

<el-upload name="picture"

:action="'/api/image/upload?imageType=xxx"

accept=".jpg, .png"

list-type="picture-card"

:limit="1"

:file-list="filelists"

:on-exceed="onExceed"

:before-upload="beforeUpload"

:on-preview="handlePictureCardPreview"

:on-success="imagesuccess"

:on-remove="handleRemove">

</el-upload>

<el-dialog :visible.sync="imgPreviewVisible" size="full" :modal="false" title="预览">

</el-dialog>

方法示例：

onExceed(files, fileList) {

this.$message({

type: 'info',

message: '最多只能上传一个图片',

ration: 6000

});

beforeUpload(file) {

const isJPG = file.type === 'image/jpeg';

const isGIF = file.type === 'image/gif';

const isPNG = file.type === 'image/png';

const isBMP = file.type === 'image/bmp';

const imgSizeLimit= file.size < 1*1024*1024;

if (!isJPG && !isGIF && !isPNG && !isBMP) {

this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');

}

if (!imgSizeLimit) {

this.$message.error('上传图片大小不能超过 1MB!');

}

return (isJPG || isBMP || isGIF || isPNG) && imgSizeLimit; },

handlePictureCardPreview:function(file){

//todo

imagesuccess:function(response, file, fileList){

//todo

this.filelists = [];

this.filelists = [file]

handleRemove:function(file, fileList){

//todo

2、action为后台上传图片接口

file-list为文件列表

limit为设置的可上传文件的最大个数

onExceed上传的文件个数超出设定时触发的函数，参数为上传的文件file和文件列表 filelists

beforeUpload文件上传前执行，参数为上传的文件file，如果返回false或者返回Primary且被reject，则停止上传

handlePictureCardPreview图片预览时触发，参数为上传的文件file，

imagesuccess图片上传成功时触发参数response, file, filelists

handleRemove移除图片时触发，参数为file, filelists

3、已有图片渲染问题：

自己在实际开发过程中，会遇到编辑情况，并且已经存在一张图片，想要放到图片组件中，可以调用组件里声明的方法。

由于是新手，组件使用不熟练，所以我将图片的显示与上传等操作分离，单独自己去展示，上传时再使用组件上传，使用组件的:show-file-list="false"属性来隐藏组件自带的图片展示功能。

后来发现自己可以自己初始化filelists列表，来使已存在的图片文件放入组件中，放入的对象当然时文件，但是我后台只有图片地址，如何拼出一个file格式对象来呢？通过debug，我发现上传的文件格式对象有好多属性，当然，存在url这个属性就可以通过组件进行展示。最简单的一种方式就是直接创建一个只有一个url属性的对象var file = { url:this.showDetailForm.profilePhotoPath } this.filelists.push(file) 然后push到文件列表，就可以在组件中进行渲染，对图片的操作可以使用声明的方法+表单属性来实现业务的全过程（当然，这样渲染的文件只有url，没有其他属性，比如文件大小，涉及到其他属性的函数都没办法调用）