vue+Element-ui 上传图片

1.打开ui组件库官网地址：Element - The world's most popular Vue UI framework

2.找到上传图片的Upload组件：

 有很多选项 在这我们使用基本的；

代码如下：

​//嵌套在form表单中使用
 <el-form-item label="表单描述字段名称" prop="字段名称">
      <el-upload
           limit="1"
           name="file"
           action="action"
           :on-success="handleSuccess"
           :on-remove="handleRemove"
           :on-exceed="handleExceed"
           :headers="headers"
       >
            <el-button size="small" type="primary">点击上传</el-button>
       </el-upload>
  </el-form-item>

  <script>
      export defaule {
            data(){
                return{
                    action:"这里写入后端提供的上传地址的接口",
                    //定义token
                    token:"",
                    //如果放在data里无效 就把header放在计算属性里试一试
                    headers:"Authorization+token值",
                    //赋值
                    file:""
              }
           },
            methods:{
                //上传成功的回调函数
                handleSuccess(file){
                  console.log(file.data);
                  if (file !== null) {
                      this.file = file.data;
                  } else {
                      this.file = this.form.schoolImg;
                      //赋值给表单下的schoolImg
                  }                
                },
                handleExceed() {
                   this.$message.warning(`当前限制选择 1 个文件，您已超标`);
                },
                beforeRemove(file) {
                   return this.$confirm(`确定移除 ${file.name}？`);
                }
            }    
       }
  </script>

​

以上就是上传图片的所有代码啦~加油 祝你成功~