前端vue ElementUI upload 上传
前端在此借助ElementUI中的upload上传组件。
<el-upload
:before-upload="beforeAlbumUpload"
:on-success="handleAlbumSuccess"
:show-file-list="false"
accept="image/*"
action="http://localhost:8989/test/upload"
class="avatar-uploader"
name="file">
<img :src="imageUrl" alt="专辑图片" class="avatar" v-if="imageUrl">
<i class="el-icon-plus avatar-uploader-icon" v-else></i>
</el-upload>
1. action表示文件上传的服务器地址接口，即上传到哪里
2. :before-upload表示在文件进行上传之间对文件进行的操作，可以对文件类型，大小进行限制，ElementUI官网的例子
beforeAlbumUpload(file: any) {
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;
}
3. :on-success表示文件上传成功之后，调用的一个方法
handleAlbumSuccess(res: any, file: any) {
// res表示后端的返回值，其中应包含文件上传后的url路径
console.log(res);
// file表示这个上传文件本身
console.log(file);
// 不是很清楚这个URL创建的方法，应该是文件展示的一种方式
// this.imageUrl = URL.createObjectURL(file.raw);
// 此处可以将上传成功的文件url赋值给image的src属性，一般为相对路径，需要拼接为完整的url
this.imageUrl = 'http://www.another.ren/audios/' + res;
}
4. name表示上传文件时文件的名字，与后端保持一致
5. accept表示选择文件时的默认类型限制，只是一个默认方式，用户可以修改，需要进行校验
页:
[1]