为什么ElementUI中的el-upload接受不到前端页面传来的文件

最新推荐文章于 2024-12-01 14:05:54 发布

四块五同学

最新推荐文章于 2024-12-01 14:05:54 发布

阅读量7.5k

点赞数 9

分类专栏： Vue 文章标签： elementui el-upload

本文链接：https://blog.csdn.net/qq_40903237/article/details/101207167

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、直接上代码（Vue前端界面）

<template>
	<div style="margin:120px 240px 120px 240px;">
        <div>
          <el-upload
                            class="upload-demo"
                            ref="upload"
                            :action="this.uploadForm.actionUrl "
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="this.uploadForm.imageFile"
                            :auto-upload="false"
                            :data="this.uploadForm.uploadData"
                            :on-success="successFun"
                           
                            >
                            <el-button slot="trigger" size="small" icon = "el-icon-circle-plus-outline" type="primary">选取图片</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" icon = "el-icon-upload" @click="submitUploadImage"
                            >上传到服务器</el-button>
            </el-upload>
            </div>
            <br/> 
        <el-form :model="uploadForm" @keyup.enter.native="dataFormSubmit()" status-icon>
						<el-form-item prop="foodName">
							<el-input prefix-icon = "el-icon-circle-plus-outline" v-model.trim="uploadForm.foodName" maxlength="16" placeholder="美食名"></el-input>
						</el-form-item>
						<el-form-item prop="foodPrice">
							<el-input prefix-icon = "el-icon-s-home" v-model.trim="uploadForm.foodPrice"  maxlength="16" placeholder="美食价格"></el-input>
						</el-form-item>
                        <el-form-item prop="foodImage">
							<el-input prefix-icon = "el-icon-help" v-model.trim="uploadForm.foodImage"  maxlength="16" :disabled="true" :placeholder="this.foodImage"></el-input>
						</el-form-item>
                        <el-form-item prop="foodType">
							<el-input prefix-icon = "el-icon-circle-plus-outline" v-model.trim="uploadForm.foodType"  maxlength="16" placeholder="美食类型"></el-input>
						</el-form-item>
                         <el-form-item prop="foodArea">
							<el-input prefix-icon = "el-icon-s-opportunity" v-model.trim="uploadForm.foodArea"  maxlength="16" placeholder="美食产地"></el-input>
						</el-form-item>
						<el-form-item>
							<el-row>
								<el-button  icon = " el-icon-circle-plus-outline" type="primary" style="margin-left:160px;" @click="uploadTheFormData()">上传</el-button>
								<el-button  icon = "el-icon-s-data" type="success" style="margin-left:50px;" @click="resetSubmit()">重置</el-button>
							</el-row>
						</el-form-item>

                      
        </el-form>

        
	</div>
</template>
<script>

	export default {
		name: 'uploadFood',
		data() {
			return {
				 uploadForm: {
					foodName: '',
					foodPrice: '',
					foodImage: '',//地址
                    foodType:'',
                    foodArea:'',
                    actionUrl:'',
                    imageFile: [],
                    uploadData:{
                         foodArea:'',
                    }
                        
				},
			
			}
		},
		   activated() {
   			
    },
   			 created(){
   		    this.setImageUrl();

    },
		methods: {
            //上传图片
        successFun(response,file,fileList){
        //这里三个入参，response为上传成功的回调值
       if(response.code==1){

          this.$message({ message: '上传成功!', type: 'success' });

       }

        },
       
           submitUploadImage() {
                 
                 this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
			setImageUrl(){
                this.uploadForm.uploadData.foodArea = sessionStorage.getItem("foodArea");
                this.uploadForm.actionUrl = "http://localhost:8080/api/finefood/upload/image";
                this.uploadForm.foodImage = sessionStorage.getItem('imgUrl');
                console.log(this.uploadForm.foodImage);
                console.log(this.uploadForm.actionUrl);
                console.log(this.uploadForm.uploadData.foodArea);

            },
           
          
			// 提交表单
			uploadTheFormData() {
			
				if(!this.uploadForm.foodName){
					this.$message({message: '美食名不能为空!',duration: 1500,type:'error'});
					return;
				}
				if(!this.uploadForm.foodPrice){
					this.$message({message: '美食价格不能为空!',duration: 1500,type:'error'});
					return;
                }
                if(!this.uploadForm.foodType){
					this.$message({message: '美食类型不能为空!',duration: 1500,type:'error'});
					return;
                }
                 if(!this.uploadForm.foodArea){
					this.$message({message: '美食产地不能为空!',duration: 1500,type:'error'});
					return;
				}
				var body = {
					foodName: this.uploadForm.foodName,
                    foodPrice: this.uploadForm.foodPrice,
                    foodImage: this.foodImage,
					foodType: this.uploadForm.foodType,
                    foodArea: this.uploadForm.foodArea,
				};
			
				this.post('/upload/food', body,(res)=>{
					//返回成功跳转
					if(res.code == 200){
						this.$message({message: res.message,duration: 1500,type:'success'});
                       
					}
				});
				        this.$router.back(-1);
                        // this.$router.go(0);
			},
		
		
			resetSubmit(){
				this.uploadForm.foodName = '';
				this.uploadForm.foodPrice = '';
                this.uploadForm.foodType = '';
                this.uploadForm.foodArea = '';
			}
		}
	}
</script>
<style>

</style>

2、Java后端界面

  /**
     *
     * @param file 要上传的文件
     * @return
     */
    @ApiOperation(value = "上传图片到本地服务器")
    @RequestMapping(value = "/upload/image",method = RequestMethod.POST)
    @ResponseBody
    public ResponseResult<MultipartFile>  upload(@RequestParam String foodArea,@RequestBody MultipartFile file) {
        ResponseResult<MultipartFile> responseResult = new ResponseResult<>();

        String[] imageUrl = {"C:\\Users\\yuanfeng\\Desktop\\kcsj_vue\\static\\cdishes",
                "C:\\Users\\yuanfeng\\Desktop\\kcsj_vue\\static\\hdishes",
                "C:\\Users\\yuanfeng\\Desktop\\kcsj_vue\\static\\ldishes",
                "C:\\Users\\yuanfeng\\Desktop\\kcsj_vue\\static\\sdishes",
                "C:\\Users\\yuanfeng\\Desktop\\kcsj_vue\\static\\xdishes",
                "C:\\Users\\yuanfeng\\Desktop\\kcsj_vue\\static\\ydishes",
                "C:\\Users\\yuanfeng\\Desktop\\kcsj_vue\\static\\zdishes"
        };

        if (file.isEmpty()) {
            responseResult.setCode(500);
            responseResult.setMessage("文件为空!");
            responseResult.setData(null);
        }
        // 获取文件名
        String fileName = file.getOriginalFilename();
        LOGGER.info("上传的文件名为：" + fileName);
        // 获取文件的后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        LOGGER.info("上传的后缀名为：" + suffixName);

        // 文件上传后的路径
        String  filePath = "";

        switch (foodArea){
            case "C": filePath = imageUrl[0];break;
            case "H": filePath = imageUrl[1];break;
            case "L": filePath = imageUrl[2];break;
            case "S": filePath = imageUrl[3];break;
            case "X": filePath = imageUrl[4];break;
            case "Y": filePath = imageUrl[5];break;
            case "Z": filePath = imageUrl[6];

        }
        File dest = new File(filePath + "\\"+fileName);
        // 检测是否存在目录
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdirs();
        }
        try {
            file.transferTo(dest);
            responseResult.setCode(200);
            responseResult.setMessage("上传成功!");
            responseResult.setData(null);
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return responseResult;
    }