Preparations: You need a background interface, you send the file to him, and he returns an online link to the picture. ok, let's do it!
The el-upload in elmentUI is used, let’s go to the official website example first. I'm using a list of images
First copy the html frame, and then choose the content according to your own needs. This direct copy and paste thing, patient elemntUI's official website, don't be impatient
<el-upload
ref="placeImg"
action="/"
accept="image/*"
:file-list="datalist"
:http-request="httpRequest" //自定义上传接口
:on-preview="handlePictureCardPreview"
list-type="picture" //列表以图片的形式展示
>
<el-button
size="small"
type="primary"
>
点击上传
</el-button>
</el-upload>The most important thing is: http-request, the function written here is where your interface is. The :http-request function itself has a parameter, which is the picture or file information you uploaded.
httpRequest(file) {
var fd = new FormData() //构造一个 FormData，把后台需要发送的参数都添加进去
fd.append('multipartFile', file.file) //传文件
fd.append('参数一', '01')
fd.append('参数二', '01')
this.$axios
.post('接口URL', fd)
.then((response) => {
console.log(response)
}
})
.catch((error) => {
console.log(error)
})
},Then! must! Notice! When passing parameters to the background interface, remember to wrap all your parameters with formdata, write as many as you have, and write them all in, and then when passing parameters, just pass your formdata directly, otherwise, you If the file is passed directly, the interface will report an error. If you have the following error message, it is the same problem as I encountered
Basically, this parameter is passed incorrectly, and I have been stuck for a long time, because it is too bad, and I don’t know where the problem is. If you write this correctly, you will be more than half successful.
If the upload is successful, elmentUI itself has a list style. If you don’t want it, you can write a ul in the html and remember to hide the one that comes with elemntUI.
<ul class="showImg">
<li v-for="(item, index) in 图片数组" :key="index">
<el-image
ref="Img"
:src="item.url"
:preview-src-list="预览图片数组"
></el-image>
//el-image自带一个点击图片查看大图的事件
<p>{
{ item.name }}</p>
<div class="upload-opera">
<div
class="view"
//写上这个，点击按钮的时候，和图片上的点击事件一样
@click="() => $refs.Img[0].clickHandler()"
></div>
<div
class="delete"
@click="
() => {
图片数组.splice(index, 1)
预览图片数组.splice(index, 1)
}
"
></div>
</div>
</li>
</ul>In the preview list, I made two arrays, one is the image array, which contains not only the image but also the name of the image, and the other is the preview image array. When elmentUI is previewing, it needs an array that only contains image links. So I made one alone. These two arrays are put in the function, and the function will return the details of the pictures you uploaded.
The preview effect is the same as the official website.
It can be zoomed in and zoomed out. There are multiple values in your preview image array, and you can flip it up and down. This is very useful.
The little rookie has finally finished uploading pictures, there should be places to improve and simplify the code, first record this, and learn more later. The main reason is that the card will not be uploaded here, and the data will be processed with formdata, and it will be fine. Just figure out what the parameters in el-upload mean.