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

今天主要是把上次遗留的最后一部分图片上传和下载的下载给做完了。
起初本以为图片下载也是向服务器发送请求返回数据，然后对数据进行处理：

export const fetchcbct=(cid,query)=>{
    return request({
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        url:'http://106.14.19.174:8080/case/'+cid+'/CBCT',
        method:'get',
        params:query,
        responseType:Blob
    })
}
const cbctf=()=>{
      fetchcbct(form.case_id,param0).then((res)=>{
        
      })
    }

虽然已经让服务器返回Blob，但是请求服务器时总会报错

虽然写了不少对data的处理方法比如：let blob = new Blob([res.data],{type: "image/jpg"}); let url = window.URL.createObjectURL(blob); url1=url;，但是折腾了很长一段时间（中间漫长的无意义的探索过程就不详细说明了，总之就是无法从服务器中得到data）我发现这个方法行不通，通过查阅网上资料，我试了试直接从网址提取文件<a href=url1>下载</a>，然后点击发现可以成功下载上传的文件，不过我们需要将文件即图片直接展示出来，又经过许多尝试，我最终发现直接在el-image中直接展示url就能展示图片,这波啊，真是舍近求远：
<el-image :src="url1" :preview-src-list="url1"></el-image>

然后因为图片不能及时渲染，如果上传以后，展示的还是原来的图片，所以我在成功上传图片以后多加了页面的刷新功能，然后我把功能布给四个类型的图片展示，这样我们前端负责的基本功能也就完成得差不多了，接下来将要进行功能的优化以及写一些额外的功能，等切割分类等接口做好了以后也会再加进去。