采用webuploader插件实现单例、多例上传图片,图片回显等,-- demo资源

java web

资源地址:

https://download.csdn.net/download/tane_1018/11006782

(1)图片上传

采用webuploader插件实现单例、多例上传图片,图片回显等。

(2)图片压缩

采用thumbnailator插件压缩图片。

(3)效果图如下

Image

 

Image

 

Image

 

Image

 

Image

 

错误提示:

 

(4)运行配置

a.修改数据库文件

b.在数据库中,执行sql文件中的biz_file.sql的脚本

c.用Nginx映射,使图片正常显示,Nginx配置如下:

#add by zf 2018-09-14 webuploader(图片上传webuploader插件)

location /picture{

    proxy_pass http://localhost:8089/picture;

    proxy_set_header Host $host;

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

#add by zf 2018-09-14(webuploader-磁盘路径代理映射)

location /upload/{

    root D:/;

}

d.访问url:http://localhost/picture/

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用element-plus、ts和vue3实现多张图片回显,可以按照以下步骤操作: 1. 首先,安装element-plus和vue3的相关依赖。可以使用npm或yarn安装element-plus和vue3的依赖包。 2. 在项目中创建一个上组件,可以使用element-plus提供的el-upload组件实现。在组件中,引入和注册el-upload组件。 3. 组件中,声明一个data属性,用于存储图片文件和回显图片列表。可以使用ref或reactive创建响应式数据。 4. 在template模板中,使用el-upload组件,设置一些必要的属性,如action、listType和multiple等。通过action属性指定上的地址,listType属性设置为"picture-card"以展示上图片,并且通过multiple属性支持上多张图片。 5. 设置el-upload组件的onSuccess和beforeRemove事件,用于在成功上图片或删除图片时触发相应的逻辑。在onSuccess事件中,将上的文件添加到data属性中的图片文件列表中;在beforeRemove事件中,通过索引将要删除的图片从data属性中的图片文件列表中移除。 6. 在组件中,使用v-for指令遍历图片文件列表,并使用el-image组件展示回显图片。el-image组件是element-plus提供的用于展示图片的组件。 7. 最后,在应用的父组件中,使用刚刚创建的上组件。使用v-model指令绑定父组件中的数据,以获取上成功后的图片文件。 通过以上步骤,就可以实现使用element-plus、ts和vue3上多张图片回显的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值