图片上传——前端

图片上传——前端

html部分片段

    <el-form ref="bookform" :model="bookform" label-width="80px">
      <el-form-item label="书名" prop="bookName">
        <el-input v-model="bookform.bookName"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="bookPrice">
        <el-input v-model="bookform.bookPrice"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="bookDesc">
        <el-input v-model="bookform.bookDesc"></el-input>
      </el-form-item>
      <el-form-item label="出版社" prop="pressName">
        <el-input v-model="bookform.pressName"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="authorName">
        <el-input v-model="bookform.authorName"></el-input>
      </el-form-item>
      <el-form-item label="出版时间" prop="publishTime">
        <el-input v-model="bookform.publishTime"></el-input>
      </el-form-item>
      <el-form-item label="开本" prop="format">
        <el-input v-model="bookform.format"></el-input>
      </el-form-item>
      <el-form-item label="纸张类型" prop="paperType">
        <el-input v-model="bookform.paperType"></el-input>
      </el-form-item>
      <el-form-item label="包装" prop="pack">
        <el-input v-model="bookform.pack"></el-input>
      </el-form-item>
      <el-form-item label="书号" prop="ISBN">
        <el-input v-model="bookform.ISBN"></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload ref="pics" action="#" list-type="picture-card" :auto-upload="false" :on-change="handleChangePics" :multiple="true">
          <i slot="default" class="el-icon-camera-solid"></i>
          <div slot="file" slot-scope="{file}">
            <img width="100%"   fit="cover" :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="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
      <el-progress :percentage="bookform.progValue"></el-progress>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
    </el-form>

js部分片段

      //删除图片（文件）的处理函数
      handleRemove(file) {
        let files = this.$refs['pics'].uploadFiles

        for (let i = 0; i < files.length; i++) {
          console.log(files[i], file)
          if (files[i].uid == file.uid) {
            files.splice(i, 1);
          }
        }
      },
      //查看原图
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //选择图片
      handleChangePics(file, fileList) {
        this.bookform.pics = fileList;

      },
      onSubmit() {
        this.bookform.progValue = 0;
        let fd = new FormData();
        for (let prop in this.bookform) {
          if(prop=='proValue'||prop=="pics")
          continue;
          if (this.bookform[prop]) {
            fd.append(prop, this.bookform[prop]);
          }
        }
        //所有提交的图片（文件）添加到formdata中
        for (let i = 0; i < this.bookform.pics.length; i++) {
          fd.append('imgsFile', this.bookform.pics[i].raw, this.bookform.pics[i].filename);
        }
        this.ajax.request({
          url: '/book/add.action',
          data: fd,
          method: 'post',
          onUploadProgress: (e) => {
            this.bookform.progValue = Math.round(e.loaded / e.total * 100);
          }
        })
      }

data部分片段

data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        bookform:{
          bookName:null,
          sellerId:1,
          bookPrice:null,
          bookDesc:null,
          publishState:1,
          typeId:1,
          pressName:null,
          authorName:null,
          publishTime:null,
          format:null,
          paperType:null,
          pack:null,
          ISBN:null,
          postage:12,
          insurance:20,
          pics:[],
          progValue:0

        }
      }

一开始前端报了400错误，400错就是因为前后端参数不一致，具体怎么不一致看后端的报错。

后端报这样的错

是因为不知道handleChangePics函数的作用是选择图片，即给pics数组赋值，导致pics是空的

改之后又报这样的错
是因为在前后端参数名不一致


前端写的叫pics，后端叫imgsFile。将前端的改成了imgsFile后问题解决。

这也解开了我的疑惑：为什么后端里是分开的两个参数，而端里将book和图片数组都放到了formdata里，那这两端的参数能对应上吗？

就是因为参数名对应一致，所以后端会知道哪些部分是book，哪些部分是imgsFile

所以不可能说book用一个formdata来写，imgsFile再用一个formdata来写

此外，在写

时，我以为表单项中写了prop属性的bookform成员才能在循环里写，其实不然，那表单项里的prop属性是干嘛用的？
表单验证的时候用

此时prop里的名字要和v-model里的字段写一致