訪問本地電腦圖片方法二：配置虛擬主機來讓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，會讓我們下載文件。