山东大学项目实训（九）——图片上传和下载（上传）（7.16）

今天开始进行前端负责的基本功能的最后一部分——CBCT、X光等各张图片的上传和下载，我认为这应该是和后端接起来最难接的一部分，虽然这一部分UI、功能都很好做，但是后端留的接口是form-data的文件，以往都是传递起来比较简单的数据信息，文件的传递我一点经验也没有。
首先跟往常一样配置request，因为是form-data，所以表头等都有所讲究，而且这次传的form-data是文件，所以不让它对数据进行处理：

export const submitcbct=(cid,query,param)=>{
    return request({
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        url:'http://106.14.19.174:8080/case/'+cid+'/CBCT',
        method:'post',
        params:query,
        data:param,
        processData:false
    })
}

接下来就是最头疼的传文件的方式，这里我尝试了许多种方法，有跟前两天一样a=x&b=x的形式，也有new一个FormData，然后append（“name”，file）的形式，但是不是报400错误就是500错误

根据我的研究，500错误应该是没把数据传过去，400错误应该是数据传过去了但格式错误，不是文件格式，后来我又经过许多次尝试，终于成功传过去文件：

const file=ref([])
const filechange=(file0)=>{
      file.value=(file0.raw)
    }
const cbcts=()=>{
      let formData = new FormData();
      formData.append('file',file.value);
      submitcbct(form.case_id,param0,formData).then((res)=>{
        console.log(res)
        Elmessage.success("上传成功")
      })
    }

这里filechange里的file0就是本地上传的文件，而且前面一定要用=号，不能用push，虽然代码量很少，但是达到这个的过程却很艰辛。
除此之外我还尝试了我们用的ElementUI自带的upload文件上传功能，但是因为跨站的残留问题，我如果在el-upload里的action里直接加入网址会因为跨站而被阻拦，而之前研究的方案因为el-upload的局限性也无法实施，而且加网址也很难动态变化（后端提供的url中有一部分案例编号是动态变化的），所以只能直接在js里面写功能。

<el-upload
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove1"
            :file-list="fileList1"
            list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

今天虽然实际进度不多，但是却是一个很大的突破，也就代表以后能够顺利向后端传输文件，至于从后端接收文件还需要研究一下，不过原理应该差不多。