Element el-upload 携带其他参数

最新推荐文章于 2025-01-10 15:13:53 发布

原创最新推荐文章于 2025-01-10 15:13:53 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #java #javascript

本文介绍如何在Vue中实现图片上传，并通过data属性传递图集ID参数，确保图片能正确归档到指定图集。文章分享了一种简单有效的方法，包括在el-upload组件中设置data属性及在created钩子中初始化val变量。

damn，我只想上传图片的时候，传递一个图集id参数，让图片归档到它该在的图集而已！
网上试了很多其他博客写的都不行，还有些太复杂，望而却步，自己搞了搞，供大家参考

在实现上传文件的基础上：
使用 :data

  							<el-upload
                                    class="avatar-uploader"
                                    action="/album/native.do?"
                                    :show-file-list="false"
                                    :data="val"  //定义一个val      val:{}
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>

<script>
    new Vue({
        el: '#app',
        data(){
            return {
                tableData: [],
                currentPage: 1,
                total: 10,
                size: 10,
                searchMap: {},
                pojo: {},
                formVisible: false,
                imageUrl: '',
                val:{}              //看见没，在这呢！
            }
        },
        ...

在加载页面的时候给val赋上值就完事儿

....，
created(){
            this.fetchData();
        },
        methods:{
            fetchData (){
                let url=window.location.href+"";
                   let id=  url.split("?")[1].split("=")[1];
                axios.get(`/album/findById.do?id=${id}`).then(response => {
                    this.pojo = response.data;
                    this.tableData=JSON.parse(response.data.imageItems);
                    this.val={id:`${this.pojo.id}`};  //此处，注意是反引号！！！！
                });
            },
            ...

后台取一下id，取得到耶，就酱吧

@RequestMapping("/native")
    public String nativeLoad( long id,@RequestParam("file") MultipartFile file, ...){
		...
	}

在这里插入图片描述

我试了试对于复杂对象，是娶不到值的，有个思路：如果前端传递过来是复杂对象，应该传递的是json字符串，有时间可以试试后台JSON来处理一下转化为对象。