springBoot+vue+element文件上传

一 前台

  /***图片上传 begin*****/
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //图片上传成功返回值
            handle_success(res) {
                console.log(res)
                this.addForm.commodityDepict=res.data;
                this.$message.success('图片上传成功')
            },
            /***图片上传 end*****/

 <!--新增界面-->
        <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
            <el-form  :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
                <el-row>
                    <el-col :span="14">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="商品名称" prop="commodityName">
                                    <el-input v-model="addForm.commodityName" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" >
                                <template>
                                    <el-select v-model="commodityType" @change="handleChange">
                                        <el-option v-for="item in selectList" :key="item.whsCode" :label="item.fruitName" :value="item.fruitEnName"></el-option>
                                    </el-select>
                                </template>
                            </el-col>
                        </el-row>

                        <el-form-item label="商品编号" prop="commodityNum">
                            <el-input v-model="addForm.commodityNum" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="生产商" prop="manufacturer">
                            <el-input v-model="addForm.manufacturer" auto-complete="off"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="10">
                        <el-upload
                                action="http://192.168.0.105:9091/fileupload.do"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-success="handle_success"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                        <el-input v-model="addForm.commodityDepict" style="display: none;" auto-complete="off"></el-input>
                    </el-col>
                </el-row>

                <el-row >
                    <el-col :span="8">
                        <el-form-item label="商品数量">
                            <el-input-number v-model="addForm.commodityAmount" :min="0" :max="20000"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品价格">
                            <el-input-number v-model="addForm.commodityPrice" :min="0" :max="20000"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="上架价格">
                            <el-input-number v-model="addForm.webPrice" :min="0" :max="20000"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
二 springBoot 后台
@PostMapping(value="/fileupload.do")
    @CrossOrigin(allowCredentials ="true")
    public ServerResponse fileUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request){
        String filename = file.getOriginalFilename();//获得文件原名 如：abc.txt
        // 构建上传文件的存放 "文件夹" 路径
        File fileDir= UploadUtils.getImgDirFile();
        //将要被储存的对象 E:/saving/abc.txt
        File target =null;
        //重命名文件
        int i = filename.lastIndexOf('.');
        String suffix = filename.substring(i, filename.length()); //文件后缀 .txt
        target = new File(fileDir.getAbsolutePath() +'/'+ UUID.randomUUID() + suffix);
        //创建目标文件夹，此时目标文件肯定不存在
        target.getParentFile().mkdir();
        try {
            //储存过程
            file.transferTo(target);
            //返回目标文件的绝对路径
            //System.out.println("文件绝对路径："+target.getAbsolutePath());
            HttpSession session = request.getSession();
            session.setAttribute("fileUpload",UUID.randomUUID() + suffix);
            return ServerResponse.createBySuccess("fileUploadSucess",UUID.randomUUID() + suffix);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return    ServerResponse.createByErrorMessage("no file upload")
;
    }