最近沒事剛好聯絡下+springboot前段後分離的專案、用上了圖片上傳功能、記錄一下。

前端待提交的表單部分程式碼

<el-form-item label="封面圖片">
                <el-upload v-model="dataForm.title"
                        class="avatar-uploader"
                        :limit="1"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        multiple
                        :http-request="uploadFile"
                        :on-remove="handleRemove"
                        :on-change='changeUpload'
                        :file-list="images">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

el-upload裡面的元素解釋：

• on-preview:點選檔案列表中已上傳的檔案時的事件
• on-remove:刪除檔案時候呼叫的方法
• on-change:檔案狀態改變時的事件，新增檔案、上傳成功和上傳失敗時都會被呼叫
• file-list:上傳的檔案列表或者預設回顯的資料展示渲染

retrun和data

return {
                images: [{name: 'food.jpg',url: 'https://img-blog.csdnimg.cn/2qRmJTD0210329194832973.png'}],imageUrl: '',fileList: [],// 檔案上傳資料（多檔案合一）
                dialogImageUrl: '',dialogVisible: false,options: [],content: '',editorOption: {},visible: false,dataForm: {
                    id: 0,title: '',bz: ''
                },tempKey: -666666 // 臨時key,用於解決tree半選中狀態項不能傳qRmJTD
 
給後臺介面問題. # 待優化
            }

預覽圖片和上傳圖片以及刪qRmJTD除圖片

changeUpload: function(file,fileList) {//預覽圖片
                this.fileList = fileList;
            },uploadFile(file){

            },handleRemove(file,fileList) {
            },handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

這裡我是用fomrData物件進行提交的、因為只需要上傳一張單張封面圖片、還有新增其他的一些表單內容進去

// 表單提交
            dataFormSubmit () {
                const form = new FormData()// FormData 物件
                form.append('file',this.fileList);
                form.append('title',this.dataForm.title);
                form.append('content',this.$refs.text.value);
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.$http({
                            url: this.$http.adornUrl(`/sys/inform/${!this.dataForm.id ? 'save' : 'update'}`),method: 'post',data: form
                        }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',type: 'success',duration: 1500,onClose: () www.cppcns.com=> {
                                        this.visible = false
                                        this.$emit('refreshDataList')
                                    }
                                })
                            } else {
                                this.$message.error(data.msg)
                            }
                        })
                    }
                })
            }

後臺的話通過HttpServletRequest request--WebUtils

.getNativeRequest(request,MultipartHttpServletRequest.class)來獲取檔案請求並解析檔案到伺服器或本地

/**
 * @author lyy
 * 儲存  PC-後臺上傳檔案
 */
@RequestMapping(value = "sys/file/save",method = {RequestMethod.POST,RequestMethod.GET})
@Transactional
public R save(HttpServletRequest request) {
    String classify = request.getParameter("classify");
    MultipartHttpServletRequest multipartRequest = WebUtils
            .getNativeRequest(request,MultipartHttpServletRequest.class);
    String fileName = "";
    if (multipartRequest != null) {
        Iterator<String> names = multipartRequest.getFileNames();
        while (names.hasNext()) {
            List<MultipartFile> files = multipartRequest.getFiles(names.next());
            if (files != null && files.size() > 0) {
                for (Multiparhttp://www.cppcns.comtFile file : files) {
                    fileName = file.getOriginalFilename();
                    String SUFFIX = FileUtil.getFileExt(fileName);
                    File uFile = new File();
                    uFile.setFileName(fileName);
                    uFile.setClassify(classify);
                    uFile.setCreateTime(new Date());
                    uFile.setFileType(SUFFIX);
                    String uuid = FileUtil.uuid();
                    try {
                        uFile.setPath(uploadFile(uuid,file) +uuid+"."+SUFFIX);
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                     fileService.save(uFile);
                }
            }
        }
    }
    return R.ok();
}

上傳檔案到本地的靜態方法

/**
     * 上傳檔案
     *@author lyy
     * @param file
     * @return
     * @throws IOException
     * @throws IllegalStateException
     */
    public static String uploadFile(String uuid,MultipartFile file) throws IllegalStateException,IOException {
        String defaultUrl = MyFileConfig.getFilePath();
        String Directory = .io.File.separator ;
        String realUrl = defaultUrl + Directory;
        java.io.File realFile = new  java.io.File(realUrl);
        if (!realFile.exists() && !realFile.isDirectory()) {
            realFile.mkdirs();
        }
        String fullFile = realUrl + uuid + "."+FileUtil.getFileExt(file.getOriginalFilename());
        file.transferTo(new java.io. File(fullFile));
        String relativePlanUrl = Directory;
        return relativePlanUrl.replaceAll("\\","/");
    }

到此這篇關於Vue+Element+Springboot圖片上傳的實現示例的文章就介紹到這了,更多相關Vue+Element+Springboot圖片上傳內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！