访问本地电脑图片方法二：配置虚拟主机来让vue项目通过nginx访问本地电脑的图片

如何访问电脑图片：

1、当前端部署在nginx中时，要想访问图片，需要通过nginx配置虚拟主机来访问本地电脑图片。

参考：https://www.cnblogs.com/zwh0910/p/15400883.html

2、当时springboot项目时，配置静态文件映射来实现访问本地电脑图片

参考：https://www.cnblogs.com/zwh0910/p/15625422.html

3、当前端部署在tomcat中时，要想访问图片，则需要在server.xml中进行配置

参考本文：https://www.cnblogs.com/zwh0910/p/15724482.html

注意：如果前端部署在nginx中，那么可以用这种方式在前端访问本地电脑的图片。如果前端部署在tomcat中，则需要在tomcat的配置文件中进行配置

<Context path="/ypimg" docBase="/home/upload"></Context>

一、单纯访问本地电脑的图片

由于vue项目无法通过本地地址（如file:///D:/upload/20211012/fa78e18f-612e-4486-9f7f-63a13a5aa6e0.jpg）访问本地电脑的图片，只能通过nginx代理来访问。

nginx的下载与安装参考：https://www.cnblogs.com/zwh0910/p/15400709.html

配置虚拟主机http://localhost:8888

修改配置文件：

http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       8888;
        server_name  localhost;

        location / {
            root D:/upload;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
}

注意：

1、修改端口为8888，以避免端口冲突。

2、用root而不是alias.

启动nginx,访问：http://localhost:8888/20211012/fa78e18f-612e-4486-9f7f-63a13a5aa6e0.jpg，可以看到图片，如下

 在vue项目的代码中访问本地电脑的图片

<view v-if="key == '入场检验报告'" class="bottom_detail_list_cell">
                        <view class="bottom_detail_name">
                            <text>{{key}}</text>
                        </view>
                        <view class="bottom_detail_content sub_detail_arrow">
                            <button class="mini-btn" type="primary" size="mini" @tap="toFilePage(key,['http://localhost:8888' + value])">查看文件</button>
                        </view>
                    </view>

实际开发中代码：

<view v-if="key == '入场检验报告'" class="bottom_detail_list_cell">
                        <view class="bottom_detail_name">
                            <text>{{key}}</text>
                        </view>
                        <view class="bottom_detail_content sub_detail_arrow">
                            <button class="mini-btn" type="primary" size="mini" @tap="toFilePage(key,[this.$globalParam.globalUrl + value])">查看文件</button>
                        </view>
                    </view>

当然也可以访问本地视频，比如我们在D:\upload文件夹下面放1.mp4视频，nginx启动后，浏览器访问http://localhost:8888/1.mp4，效果如下：

二、解决vue项目访问本地电脑的图片时的跨域问题

1、配置路径为/api/xxx，如下所示:

<template>
  <div>
    <div id="wordView" v-html="vHtml"/>
  </div>
</template>

<script>
import mammoth from "mammoth";
export default {
  name: "wordPreview",
  data() {
    return {
      vHtml: "",
      wordURL:'/api/RA-0707.docx'  //文件地址，看你对应怎末获取、赋值
    };
  },/
  created() {
    // 具体函数调用位置根据情况而定
    this.readExcelFromRemoteFile(this.wordURL);
  },
  methods: {
    // 在线查看word文件
    readExcelFromRemoteFile: function (url) {
      var vm = this;
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function () {
        if (xhr.status == 200) {
          mammoth
              .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
              .then(function (resultObject) {
                vm.$nextTick(() => {
                  // document.querySelector("#wordView").innerHTML =
                  //   resultObject.value;
                  vm.vHtml = resultObject.value;
                });
              });
        }
      };
      xhr.send();
  },
}
}
</script>

<style scoped>

</style>

2、编写vue.config.js，通过proxy来解决跨域

module.exports = {
  publicPath: '/api',
  devServer: {
    host: '0.0.0.0',
    //设置端口号
    port: 8080,
    //自动打开浏览器
    open: false,
    //设置跨域
    proxy: {
      '/api': {
        target: 'http://localhost:8888'
      }
    }
  },
}

3、在nginx的webapp目录下新建api目录，将文件放到api目录下

4、启动nginx，

浏览器访问http://localhost:8888/api/1.jpg，效果如下：

浏览器访问：http://localhost:8888/api/RA-0707.docx，会让我们下载文件。