elementui的el-form和el-upload上传文件和表单数据_el-form el-upload

表单数据和文件上传四种思路：

1、文件和表单数据一起上传到后端，即后端一个接口接收文件和表单数据（这种是比较古老的方法，后端接口复杂度也大，且不易实现上传文件进度条等功能，不推荐）

2、先上传文件，然后后端保存文件（先不进行数据库写入），返回一个文件的url给前端，前端收到url后和其他表单数据一起提交给后端，后端再一起写入数据库（要求后端将上传文件的接口独立出来，推荐）

3、先上传文件，然后后端保存文件，并写入数据库，得到数据库id，将数据库id返回给前端，前端将表单数据和数据库id一起发送给后端，然后后端根据数据库id找到该记录，在更新表单数据到该记录

4、先上传表单数据，然后后端保存表单数据，写入数据库，然后前端在点击上传文件（并传递之前上传表单数据的数据库id），后端接收到文件保存后，将url更新进表单数据里（这种方法最容易实现，但是用户需要两次操作才能更新表单数据和文件，不像第二和第三种，只需要点击提交表单后就可以更新）

使用el-upload上传文件

使用el-upload还需要注意的是：

​ action属性发送的请求是使用内部封装的ajax请求，所以不会经过你自己封装的axios，所以如果你配置来代理，需要你自己为该请求添加代理前缀，如果使用了token身份校验，你还需要为本次请求添加请求头

​ el-upload的name属性的就是本次发送请求文件的参数名，需要将他更改为后端需要的参数名

接下来是使用上面说的第二种方法来进行表单数据和文件一起上传

html部分

      <el-form :rules="categoryRules" ref="categoryRuleForm" :model="categoryForm">
        <el-form-item label="分类名称" label-width="120px" prop="category_name">
          <el-input v-model="categoryForm.category_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类图片" label-width="120px" prop="category_pic">
          <el-upload
          list-type="picture-card"
          :limit="1"
          :on-exceed="handleExceed"
          name="category_pic"
          action="/api/category/uploadPic"
          :headers="headerObj"
          :on-remove="handleRemove"
          :on-success="handleCategoryPicSuccess"
          :file-list="fileList"
          :before-upload="beforeCategoryPicUpload"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

js部分

<script>
import {getToken} from '@/utils/auth'
import { getCategoryList, addCategory, updateCategory, deleteCategory, deleteCategoryPic } from '../../api/category'
export default {
  name: '',
  data () {
    return {

      categoryForm: {
        category_name: '',  // 分类名称
        category_pic: '', // 分类图片
      },

      // el-upload的请求头
      headerObj: {
        Authorization: `Bearer ${getToken()}`,  
      },

      fileList: [], // 上传时的图片列表(这里的图片将会显示出缩略图)

      // 大图预览相关
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  mounted () {
  },
  methods: {
    // 添加分类
    addCategory() {
          this.addDialogFormVisible = false
          let result = await addCategory({
            category_name: this.categoryForm.category_name,
            category_pic: this.categoryForm.category_pic,
          })
          if(result.code === 200){
            this.$message.success(result.message)
            this.getCategoryList()
          }else{
            this.$message.error(result.message)
          }
    },
    // 上传图片成功
    handleCategoryPicSuccess(res, file) {
      // 将服务器返回的文件url地址赋值给表单的category_pic，这样就可以在表单提交时将图片地址提交到服务器
      this.categoryForm.category_pic = res.data.category_pic
      this.getCategoryList()
      // 提示信息
      this.$message({
        message: '图片上传成功',
        type: 'success'
      });
    },
    // 上传图片前
    beforeCategoryPicUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 1MB!');
      }
      return isJPG && isLt1M;
    },
    // 图片超出限制
    handleExceed(files, fileList) {
      this.$message.error('当前限制选择 1 张图片!');
    },
    // 点击删除按钮
    async handleRemove(file) {  // 删除图片
      // 删除缩略图图片
      this.fileList.splice(this.fileList.indexOf(file), 1);

      // 发送请求删除服务器图片
      let result = await deleteCategoryPic({
        category_pic: this.categoryForm.category_pic,
      })
      if(result.code === 200){
        this.$message.success(result.message)
      }else{
        this.$message.error(result.message)
      }
    },
    // 点击大图预览按钮
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 点击下载按钮
    handleDownload(file) {
      // 提示
      this.$message({
        message: '暂未开发',
        type: 'danger'
      });
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102