• Upload 上传
    • 点击上传
    • 用户头像上传
    • 照片墙
    • 图片列表缩略图
    • 上传文件列表控制
    • 拖拽上传
    • 手动上传
    • Attribute
    • Slot
    • Methods

    Upload 上传

    通过点击或者拖拽上传文件

    点击上传

    Upload 上传 - 图1

    通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limiton-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。

    1. <el-upload
    2. class="upload-demo"
    3. action="https://jsonplaceholder.typicode.com/posts/"
    4. :on-preview="handlePreview"
    5. :on-remove="handleRemove"
    6. :before-remove="beforeRemove"
    7. multiple
    8. :limit="3"
    9. :on-exceed="handleExceed"
    10. :file-list="fileList">
    11. <el-button size="small" type="primary">点击上传</el-button>
    12. <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    13. </el-upload>
    14. <script>
    15. export default {
    16. data() {
    17. return {
    18. 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'}]
    19. };
    20. },
    21. methods: {
    22. handleRemove(file, fileList) {
    23. console.log(file, fileList);
    24. },
    25. handlePreview(file) {
    26. console.log(file);
    27. },
    28. handleExceed(files, fileList) {
    29. this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
    30. },
    31. beforeRemove(file, fileList) {
    32. return this.$confirm(`确定移除 ${ file.name }?`);
    33. }
    34. }
    35. }
    36. </script>

    用户头像上传

    使用 before-upload 限制用户上传的图片格式和大小。

    Upload 上传 - 图2

    1. <el-upload
    2. class="avatar-uploader"
    3. action="https://jsonplaceholder.typicode.com/posts/"
    4. :show-file-list="false"
    5. :on-success="handleAvatarSuccess"
    6. :before-upload="beforeAvatarUpload">
    7. <img v-if="imageUrl" :src="imageUrl" class="avatar">
    8. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    9. </el-upload>
    10. <style>
    11. .avatar-uploader .el-upload {
    12. border: 1px dashed #d9d9d9;
    13. border-radius: 6px;
    14. cursor: pointer;
    15. position: relative;
    16. overflow: hidden;
    17. }
    18. .avatar-uploader .el-upload:hover {
    19. border-color: #409EFF;
    20. }
    21. .avatar-uploader-icon {
    22. font-size: 28px;
    23. color: #8c939d;
    24. width: 178px;
    25. height: 178px;
    26. line-height: 178px;
    27. text-align: center;
    28. }
    29. .avatar {
    30. width: 178px;
    31. height: 178px;
    32. display: block;
    33. }
    34. </style>
    35. <script>
    36. export default {
    37. data() {
    38. return {
    39. imageUrl: ''
    40. };
    41. },
    42. methods: {
    43. handleAvatarSuccess(res, file) {
    44. this.imageUrl = URL.createObjectURL(file.raw);
    45. },
    46. beforeAvatarUpload(file) {
    47. const isJPG = file.type === 'image/jpeg';
    48. const isLt2M = file.size / 1024 / 1024 < 2;
    49. if (!isJPG) {
    50. this.$message.error('上传头像图片只能是 JPG 格式!');
    51. }
    52. if (!isLt2M) {
    53. this.$message.error('上传头像图片大小不能超过 2MB!');
    54. }
    55. return isJPG && isLt2M;
    56. }
    57. }
    58. }
    59. </script>

    照片墙

    使用 list-type 属性来设置文件列表的样式。

    Upload 上传 - 图3

    1. <el-upload
    2. action="https://jsonplaceholder.typicode.com/posts/"
    3. list-type="picture-card"
    4. :on-preview="handlePictureCardPreview"
    5. :on-remove="handleRemove">
    6. <i class="el-icon-plus"></i>
    7. </el-upload>
    8. <el-dialog :visible.sync="dialogVisible">
    9. <img width="100%" :src="dialogImageUrl" alt="">
    10. </el-dialog>
    11. <script>
    12. export default {
    13. data() {
    14. return {
    15. dialogImageUrl: '',
    16. dialogVisible: false
    17. };
    18. },
    19. methods: {
    20. handleRemove(file, fileList) {
    21. console.log(file, fileList);
    22. },
    23. handlePictureCardPreview(file) {
    24. this.dialogImageUrl = file.url;
    25. this.dialogVisible = true;
    26. }
    27. }
    28. }
    29. </script>

    图片列表缩略图

    Upload 上传 - 图4

    1. <el-upload
    2. class="upload-demo"
    3. action="https://jsonplaceholder.typicode.com/posts/"
    4. :on-preview="handlePreview"
    5. :on-remove="handleRemove"
    6. :file-list="fileList"
    7. list-type="picture">
    8. <el-button size="small" type="primary">点击上传</el-button>
    9. <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    10. </el-upload>
    11. <script>
    12. export default {
    13. data() {
    14. return {
    15. 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'}]
    16. };
    17. },
    18. methods: {
    19. handleRemove(file, fileList) {
    20. console.log(file, fileList);
    21. },
    22. handlePreview(file) {
    23. console.log(file);
    24. }
    25. }
    26. }
    27. </script>

    上传文件列表控制

    通过 on-change 钩子函数来对列表进行控制

    Upload 上传 - 图5

    1. <el-upload
    2. class="upload-demo"
    3. action="https://jsonplaceholder.typicode.com/posts/"
    4. :on-change="handleChange"
    5. :file-list="fileList">
    6. <el-button size="small" type="primary">点击上传</el-button>
    7. <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    8. </el-upload>
    9. <script>
    10. export default {
    11. data() {
    12. return {
    13. fileList: [{
    14. name: 'food.jpeg',
    15. url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
    16. }, {
    17. name: 'food2.jpeg',
    18. url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
    19. }]
    20. };
    21. },
    22. methods: {
    23. handleChange(file, fileList) {
    24. this.fileList = fileList.slice(-3);
    25. }
    26. }
    27. }
    28. </script>

    拖拽上传

    Upload 上传 - 图6

    1. <el-upload
    2. class="upload-demo"
    3. drag
    4. action="https://jsonplaceholder.typicode.com/posts/"
    5. multiple>
    6. <i class="el-icon-upload"></i>
    7. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
    8. <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
    9. </el-upload>

    手动上传

    Upload 上传 - 图7

    1. <el-upload
    2. class="upload-demo"
    3. ref="upload"
    4. action="https://jsonplaceholder.typicode.com/posts/"
    5. :on-preview="handlePreview"
    6. :on-remove="handleRemove"
    7. :file-list="fileList"
    8. :auto-upload="false">
    9. <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    10. <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    11. <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    12. </el-upload>
    13. <script>
    14. export default {
    15. data() {
    16. return {
    17. 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'}]
    18. };
    19. },
    20. methods: {
    21. submitUpload() {
    22. this.$refs.upload.submit();
    23. },
    24. handleRemove(file, fileList) {
    25. console.log(file, fileList);
    26. },
    27. handlePreview(file) {
    28. console.log(file);
    29. }
    30. }
    31. }
    32. </script>

    Attribute

    参数说明类型可选值默认值
    action必选参数,上传的地址string
    headers设置上传的请求头部object
    multiple是否支持多选文件boolean
    data上传时附带的额外参数object
    name上传的文件字段名stringfile
    with-credentials支持发送 cookie 凭证信息booleanfalse
    show-file-list是否显示已上传文件列表booleantrue
    drag是否启用拖拽上传booleanfalse
    accept接受上传的文件类型(thumbnail-mode 模式下此参数无效)string
    on-preview点击文件列表中已上传的文件时的钩子function(file)
    on-remove文件列表移除文件时的钩子function(file, fileList)
    on-success文件上传成功时的钩子function(response, file, fileList)
    on-error文件上传失败时的钩子function(err, file, fileList)
    on-progress文件上传时的钩子function(event, file, fileList)
    on-change文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用function(file, fileList)
    before-upload上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。function(file)
    before-remove删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。function(file, fileList)
    list-type文件列表的类型stringtext/picture/picture-cardtext
    auto-upload是否在选取文件后立即进行上传booleantrue
    file-list上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]array[]
    http-request覆盖默认的上传行为,可以自定义上传的实现function
    disabled是否禁用booleanfalse
    limit最大允许上传个数number
    on-exceed文件超出个数限制时的钩子function(files, fileList)-

    Slot

    name说明
    trigger触发文件选择框的内容
    tip提示说明文字

    Methods

    方法名说明参数
    clearFiles清空已上传的文件列表(该方法不支持在 before-upload 中调用)
    abort取消上传请求( file: fileList 中的 file 对象 )
    submit手动上传文件列表