Vue+element Upload利用http-request实现第三方地址图片上传
<template>
<el-upload
:action="uploadUrl"
:http-request="uploadImage"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<i class="el-icon-plus"></i>
</el-upload>
</template>
<script>
export default {
data() {
return {
uploadUrl: 'https://upload.example.com/api/upload', // 第三方上传地址
imageUrl: ''
};
},
methods: {
uploadImage(request) {
const formData = new FormData();
formData.append('file', request.file);
// 使用你喜欢的Ajax库或原生XMLHttpRequest上传文件
// 这里以原生XMLHttpRequest为例
const xhr = new XMLHttpRequest();
xhr.open('POST', this.uploadUrl, true);
xhr.onload = () => {
if (xhr.status === 200) {
// 上传成功后的处理逻辑
this.$message.success('上传成功');
// 调用el-upload的on-success钩子
request.onSuccess(xhr.response);
} else {
// 上传失败的处理逻辑
this.$message.error('上传失败');
// 调用el-upload的on-error钩子
request.onError('上传失败');
}
};
xhr.send(formData);
},
handleRemove(file, fileList) {
// 处理移除图片的逻辑
},
handlePictureCardPreview(file) {
// 处理图片预览的逻辑
},
handleSuccess(response, file, fileList) {
// 处理上传成功的逻辑
},
beforeUpload(file) {
// 检查文件类型和大小等
const isJPG = file.type === 'image/jpeg';
const isLT2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLT2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLT2M;
}
}
};
</script>
这个代码实例展示了如何使用Vue和Element UI的<el-upload>
组件结合原生的XMLHttpRequest来实现第三方上传服务的功能。它包括了文件校验、上传逻辑以及上传成功后的处理。这是一个简洁而实用的上传图片的解决方案。
评论已关闭