在项目开发中，为了实现上传文件的功能，我们需要用到el-upload这个组件，为了实现回显放大效果，就要用到el-image这个组件了。官方文档中介绍了上传的两种方法，一个是使用action，其参数必须要上传的地址；另一个是http-request，该方法覆盖默认的上传行为，可以自定义上传的实现。下面阐述如何实现图片上传，回显，放大效果。
官方文档：Element - The world's most popular Vue UI framework
el-upload组件相关api介绍：
上传图片有以下这些几种方式，开发者可以根据项目实际情况进行选择。
- 传入自定义的上传按钮类型和文字提示
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
}
}
}
</script>- 照片墙，可以回显图片
代码如下：
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>- 可以对图片进行拖拽
代码如下：
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>通过以上介绍我们已经初步了解了el-upload的用法，下面我们来看图片上传回显放大的实现过程。代码如下：
<el-upload
ref="upload"
class="upload-demo"
action="#"
:on-remove="remove"
list-type="picture"
:http-request="handler"
:limit="limit"
:accept="'.png,.jpg,.jpeg'"
:on-exceed="onExceed"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
>
<el-button size="small" type="primary" icon="el-icon-upload"
>上传图片</el-button
>
<div slot="file" slot-scope="{ file }">
<div style="display: flex; align-items: center">
<el-image
style="width: 78px; height: 78px"
:src="file.url"
:preview-src-list="[file.url]"
></el-image>
<div style="font-size: 15px; font-weight: bold; margin-left: 32px">
<el-tooltip :content="file.name" :disabled="isShow" placement="top">
<div @mouseover="inputOnMouseOver(file.name)">
{{
file.name.length > 10
? file.name.slice(0, 10) + "..."
: file.name
}}
</div></el-tooltip
>
</div>
<div style="margin-left: 32px">
<i
class="el-icon-close"
@click="remove"
style="display: inline-block; font-size: 18px"
></i>
</div>
</div>
</div>
</el-upload>methods: {
//fileList存放上传的图片 file是对象
handler(file) {
this.fileList = [file];
},
// 校验上传的文件数量是否超出限制
onExceed() {
this.$message.error(`只能上传${this.limit}张图片！`);
},
// 移除图片时清空
remove(file) {
this.$refs.upload.clearFiles();
},
// 上传前校验图片格式
beforeAvatarUpload(file) {
const isType = ["image/jpg", "image/png", "image/jpeg"].includes(
file.type
);
if (!isType) {
this.$message({
message: "只能上传格式为PNG,JPG,JPEG的图片！",
type: "warning",
});
}
return isType;
},
// 图片名字过长处理
inputOnMouseOver(name) {
if (name.length < 10) {
this.isShow = true;
} else {
this.isShow = false;
}
},
},效果如下，点击图片可以实现放大效果：
文章来源：https://www.toymoban.com/news/detail-712889.html
文章来源地址https://www.toymoban.com/news/detail-712889.html
到了这里，关于el-upload使用http-request实现图片上传，回显，放大效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
