上传图片与双向显示图片

最新推荐文章于 2024-07-10 10:07:13 发布

sayhitoloverOvO

最新推荐文章于 2024-07-10 10:07:13 发布

阅读量523

点赞数 1

分类专栏： html 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/sayhitoloverOvO/article/details/120172331

版权

本文介绍了如何使用Vue.js进行图片前端展示，后端采用Java服务进行图片处理，包括文件名处理、文件类型判断、存储路径创建等步骤。同时，通过Spring的静态资源处理和Nginx的双向代理实现图片访问，优化了数据结构并配置了上传限制。

摘要由CSDN通过智能技术生成

前端

网页展示部分：

前端显示部分代码

            <!--class      组件名字
                action     图片上传的地址
                on-preview 点击上传文件的文件方法
                on-remove  点击删除文件的方法
                file-list  展现的文件列表信息 数组
                drag允许拖拽
                multiple批量操作
             -->
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
            drag
            multiple
>
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>

前端方法部分代码

<script>
  export default {
    data() {
      return {
        fileList: []，
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
        beforeAvatarUpload(file) {
        const isJPG =