前端vue ElementUI upload 上传

赵匡胤

前端
在此借助ElementUI中的upload上传组件。

[HTML] 纯文本查看 复制代码

<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官网的例子

[HTML] 纯文本查看 复制代码

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表示文件上传成功之后，调用的一个方法

[HTML] 纯文本查看 复制代码

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表示选择文件时的默认类型限制，只是一个默认方式，用户可以修改，需要进行校验