组件-Element—Upload（上传）

组件-Element—Upload（上传）

组件—上传

1. 点击上传
   

   <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>
   

2. 用户头像上传
   

   <el-upload
     class="avatar-uploader"
     action="https://jsonplaceholder.typicode.com/posts/"
     :show-file-list="false"
     :on-success="handleAvatarSuccess"
     :before-upload="beforeAvatarUpload">
     ![在这里插入图片描述]()
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
   </el-upload>
   
   <style>
     .avatar-uploader .el-upload {
       border: 1px